html - 如何将值从html传递到css文件

Question

我正在尝试将一个值从我的 html 传递到我的 css 文件中，以便以百分比显示水箱值。下面是当前的 html 和 css

• 不使用除 html 和 css 以外的任何东西

#tank-container {
  width: 120px;
  height: 120px;
  position: relative;
  background-color: clear;
  border-radius: 120px;
  border: 1px solid black;
  float : left;
}

#tank-content {
  height: attr(tank-content); /* edit this */
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: green;
  border-bottom-right-radius: 120px;
  border-bottom-left-radius: 120px;
}

<div id="tank-container">
  <div id="tank-content">
     <p tank-content="50%"></p>
  </div>
</div>

] 1

Answer 1

我知道你想用 attr( tank-content ) 做什么，但是现在，这只对填充伪的 content 属性有用。元素。

引用 Mozilla 的 MDN 文章:css/attr

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

一个潜在的解决方案可能是在 #tank-content 上设置内联 style = "height: @t.getPercentage" 属性。这不是您正在寻找的干净的自定义属性解决方案，但它允许您直接在 HTML 中设置高度(百分比)，而无需编写 n 增量 CSS 规则或使用 JavaScript。

#tank-container {
  width: 120px;
  height: 120px;
  position: relative;
  background-color: clear;
  border-radius: 120px;
  border: 1px solid black;
  float : left;
}

#tank-content {
  height: attr(tank-content); /* edit this */
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: green;
  border-bottom-right-radius: 120px;
  border-bottom-left-radius: 120px;
}

<div id="tank-container">
  <div id="tank-content" style="height: 50%;">
     <p tank-content="50%"></p>
  </div>
</div>