Question

我的英语不是很好，所以标题看起来有点奇怪。我想像这样使用css函数attr（）： example
我的意思是我有一个容器<div>和一个内部<div>我想要宽度取决于data-width属性。例如，这将是伟大的，但这不起作用：

<div class="container">
    <div data-width="70%">
    </div
</div>

.container {
    width: 600px;
    height: 200px;
}
.container div {
    width: attr(data-width);
    height: 100%;
}

是否有任何noJS方法可以使用这样的属性？

更新：伙计们让我相信JS是唯一可以做到这一点的方法:)

这不是一个大问题（但这很糟糕.CSS，为什么你这么不合逻辑？content:attr(data-width)和width: attr(data-width)之间的区别是如此之大？）。

其中一个人有想法通过jQuery来浏览所有元素。没关系，但它非常...本地？不知道怎么用英语说。无论如何，我重新编写了他的代码，这里是：

allowed = ['width','color','float'];

$(document).ready(function () {
  $('div').each(function (i, el) {
    var data = $(el).data(),style = '';
    if (!$.isEmptyObject(data)) {
      $.each(data, function (attr, value) {
        if (allowed.indexOf(attr) != - 1) {
          style += attr + ': ' + value + '; ';
        }
      })
      if (style.length != 0) {
        $(el).attr('style', style);
      }
    }
  })
})

想法很简单：
我们假设我们想要添加到元素的样式是唯一的样式。我的意思是没有脚本可以尝试添加其他一些样式，

2.我们创建一个允许的属性名称数组，我们需要避免在样式属性中使用错误的名称，例如style="answerid: 30671428;"，

3.我们浏览每个元素，将其数据属性保存在一个对象中，检查对象是否为空，如果不是 - 检查每个属性是否允许，创建一个包含我们需要的所有样式的字符串，然后 - 最后 - 添加我们的样式字符串作为样式属性的内容元素。

这就是全部，谢谢大家

Answer 1

使用class属性而不是数据宽度。 html标记可以包含由空格分隔的多个类，因此如果您想要非常精确，可以根据需要设置多个类。例如：

<div class="w70 h100">
</div>

然后在你的css中：

.w70{
    width: 70%;
}

.h100{
    height: 100%;
}

等等。

Answer 2

我不建议单独使用CSS，因为它不允许你做你正在寻找的东西......而是使用脚本语言（在我的jQuery案例中）为你完成这个功能： jsFiddle

的jQuery

jQuery(document).ready(function(){
    var dataElem; // to store each data attribute we come accross
    jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
        dataElem = jQuery(this); //get the current div
        if(dataElem.data('width')){ //make sure it exists before anything further
            dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
            dataElem.css("background-color", "yellow");
        }
    });    
});

HTML

<p>The links with a data-width attribute gets a yellow background:</p>

<div>
    <a href="http://www.w3schools.com">w3schools.com</a>
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
    <a href="http://www.disney.com">disney.com</a>
</div>
<div>
    <a href="http://www.wikipedia.org">wikipedia.org</a>
</div>

以上注释：

each，data，width。

Answer 3

是否有任何noJS方法可以使用这样的属性？

不，您不能使用CSS将元素的宽度设置为data-width属性。 CSS不允许这样做，因为attr()目前仅适用于CSS content属性，该属性仅适用于css伪元素（::before和::after）。

如何通过尽可能少的javascript来实现这一目标？

使用提供的DOM API本机主机非常容易。

使用Document.querySelectorAll()选择元素。
使用Element.style迭代元素并应用样式，可以使用Element.dataset

data-width

（Demo）

var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;

我可以使用元素属性来创建样式规则吗？

3 个答案: