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