如何将元素的属性值用作 css 属性？ CSS3答案

【问题标题】：How do I use an elements' attribute value as a css property? CSS3如何将元素的属性值用作 css 属性？ CSS3
【发布时间】：2020-03-12 18:18:24
【问题描述】：

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：