如何使用元素的属性值作为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的左边距边缘属性设置为画布的width / 2。 但是，似乎属性选择器用于为具有特定属性/值的元素设置样式，而不是返回属性值。

是否有一种方法（功能/方法）将HTML属性值用作CSS中的属性值？然后在像JS这样的表达式中使用它，例如attrValue * 2或attrValue / 2。

谢谢。

Answer 1

大多数浏览器尚未广泛支持此功能，请参见attr()

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

如果您想要某种行为，请尝试使用JavaScript。使用javascript，您实际上可以根据需要的值动态创建样式，请参见Set CSS styles with javascript