Html 获取 CSS 中的属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18300536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get value of attribute in CSS
提问by Amar Syla
I have this HTML code:
我有这个 HTML 代码：
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
我想在 CSS 中设置它的宽度等于 data-width 属性的值，例如这样的：
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
我看到这是在某处完成的，但我不记得了。谢谢。
回答by Amar Syla
This is what I was looking for:
这就是我要找的：
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
The problem is that at this time of writing it's not supported even by some of the major browsers, in this case Chrome.
问题是，在撰写本文时，即使某些主要浏览器（在这种情况下为 Chrome）也不支持它。
回答by Vikas Ghodke
You cant pass data attribute value directly in to css without pseudo type content. Rather you can do this way.. CHECK THIS FIDDLE
您不能在没有伪类型内容的情况下将数据属性值直接传递给 css。相反，你可以这样做..检查这个小提琴
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
回答by user
Inline CSS variablesare almost as declarative as data attributes, and they are widely supportednow, in contrast to the attr(). Check this out:
内联CSS变量几乎与声明的数据属性，它们被广泛的支持，现在，在对比的attr()。看一下这个：
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>回答by Joren
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
CSS 是关于特定 html 元素的静态样式信息，而不是相反。如果您想使用 CSS 来设置 div 的宽度，我建议您使用类：
HTML:
HTML：
<div class="foo"></div>
CSS:
CSS：
.foo {
width: 70px;
}
回答by kunalbhat
I'm just having fun with this, but a jQuery solution would be something like this:
我只是喜欢这个，但 jQuery 解决方案是这样的：
HTML
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
Codepen 草图在这里：http://cdpn.io/otdqB
KIND OF AN UPDATENot what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
一种更新不是您要找的，因为您想将变量传递给 width 属性。在这种情况下，您不妨使用一个类。
HTML
HTML
<div data-width='70'>Blue</div>
CSS
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
草图在这里：http: //cdpn.io/jKDcH
回答by ozgrozer
Another approach would be using CSS Custom Propertieswith style element to pass values from HTML to CSS.
另一种方法是使用带有样式元素的CSS 自定义属性将值从 HTML 传递到 CSS。
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>回答by Arvind
can you try this
你能试试这个吗
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});
