html - 如何将元素的属性值用作 css 属性？ CSS3

Question

HTML

<canvas id="canvas" width="800" height="600">
</canvas>

<div class="content"></div>

CSS

div.content {
  :root {
    --xPos: canvas[id="canvas"].width/2;
}   
  position: absolute;
  left: var(--xPos);
  bottom: 100px;
}

我尝试使用属性选择器来获取 canvas.id.width 值，这样我就可以将 div.content 的左边距属性设置为 Canvas 的宽度/2。 但是，属性选择器似乎用于为具有特定属性/值的元素设置样式，而不是返回属性值。

有没有办法(函数/方法)将 HTML 属性值用作 CSS 中的属性值？然后在 JS 中的表达式中使用它，例如 attrValue*2 或 attrValue/2。

谢谢。

Answer 1

这在大多数浏览器中尚未得到广泛支持，请参阅 attr()

如果它只是不同视口(viewport)中的布局问题，请尝试使用 CSS calc()和/或 Media Queries

如果它的某些行为是您想要的，请尝试使用 JavaScript。使用 javascript，您实际上可以使用您想要的任何值动态创建样式，请参阅 Set CSS styles with javascript