javascript - CSS - 获取其他元素的属性

标签 javascript css dom refer

我想知道是否可以在不使用 Javascript 或其他编程语言的情况下使用 Javascript DOM 之类的东西来引用某些元素。
这就是我的意思。假设我们有两个应该具有相同高度的 div。我想获得第一个 div 的高度以将其分配给第二个,如下所示:

#div1 {
    height:400px;
}

#div2 {
    height:#div1.height;
}

如您所见,我在 Javascript 中执行与 document.getElementById("id").style.height 完全相同的操作。
是否有可能做到这一点?如果没有,我想知道是否存在论坛、网站等来讨论 CSS 改进或了解这门语言的发展。
提前致谢!

最佳答案

这个方法是使用 CSS Variable

/*css*/

body {
  --div-height: 400px;
}

#div1 {
  height: var(--div-height);
}

#div2 {
  height: var(--div-height);
}
<!DOCTYPE html>
<!---html--->
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="div1">
    <p>This is div1</p>
  </div>
  <div id="div2">
    <p>This is div2</p>
  </div>
</body>

</html>

在这个例子中,我在 body 范围内声明了变量 --div-height,所以 body 标签内的任何元素都可以通过 css 访问这个变量。

关于javascript - CSS - 获取其他元素的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42937286/

相关文章:

css - :first-child and :nth-child 的奇怪行为

javascript - 在 Svelte 中,当在 radio 输入中使用 "bind:group"时,未设置 "checked"属性

javascript - 创建元素有哪些不同的方式

javascript - 如何将node.js服务器应用程序编译为可执行文件?

html - 如何编写兼容不同浏览器和分辨率的html和css

javascript - 如何在 Canvas 上的图像上包裹文本

css - 我怎样才能用CSS覆盖一个类?

javascript - jquery Onclick函数与回调排序函数导致双击

javascript - 如何过滤数组循环中的数据222

Javascript:事件和函数的含义用OR运算符分隔