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

时间:2017-04-23 20:10:47

标签: html css variables

我正在尝试将html中的值传递到我的css文件中以百分比显示tank值。当前的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

2 个答案:

答案 0 :(得分:0)

您可以使用data-attr做类似于您想要实现的目标

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

[data-content]::after  {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width:100%;
  background-color: green;
  border-bottom-right-radius: 120px;
  border-bottom-left-radius: 120px;
}

[data-content="50%"]::after  {
  height: 50%
}
<div id="tank-container">
  <div id="tank-content">
    <p data-content="50%"></p>
  </div>
</div>

答案 1 :(得分:0)

我看到你尝试用attr( tank-content )做什么,但是,目前,这只对填充伪元素的content属性有用。

参考Mozilla的MDN文章:css/attr

  

attr()函数可以与任何CSS属性一起使用,但对内容以外的属性的支持是实验性的。

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

&#13;
&#13;
#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;
}
&#13;
<div id="tank-container">
  <div id="tank-content" style="height: 50%;">
     <p tank-content="50%"></p>
  </div>
</div>
&#13;
&#13;
&#13;