Могу ли я использовать атрибуты элемента для создания правил стиля?

Question

Я не знаю на английском, поэтому название может показаться немного странным. Я хочу использовать функцию CSS Attr(), как это:
Я имею в виду есть контейнер <div> и внутреннюю <div>, что я хочу иметь ширину в зависимости от атрибута данных ширины. Например, это было бы здорово, но это не работает:

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

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

Есть ли noJS способ использовать такие атрибуты, как это?

UPDATE: Ребята убедили меня в том, что JS это единственный способ сделать это :)

Это не большая проблема (но это плохо CSS, почему Youre так нелогично ли разница между 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); 
     } 
    } 
    }) 
}) 

Идея проста:
1. Мы предполагаем, что стиль мы хотим добавить к элементу является только один. Я имею в виду нет сценариев, которые будут пытаться добавить некоторые другие стили,

2. Мы создаем массив допустимых имен атрибутов, нам нужно, чтобы избежать использования неправильных имен в атрибуте стиля, например style="answerid: 30671428;",

3. Мы проходим через каждый элемент, сохраняем его атрибуты данных в объекте, проверяем, пуст ли объект, а если нет - проверяйте каждый атрибут, если он разрешен, создайте строку, содержащую все стили, которые нам нужны, и, наконец, добавим наш стиль string для элемента в качестве атрибута стиля.

Это все, спасибо всем

Answer 1

Я бы не советовал использовать 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> 

---

Примечания по вышесказанному:

1. each, data, width.

Answer 2

Вместо того чтобы делать данные ширину, используйте атрибут класса. В теге html могут быть mutliple классы, разделенные пробелами, поэтому, если вы хотите быть очень точными, вы можете настроить столько классов, сколько вам нужно. Например:

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

Тогда в вашем CSS:

.w70{ 
    width: 70%; 
} 

.h100{ 
    height: 100%; 
} 

И так далее.

Answer 3

Есть ли какой-либо способ использования NOJS?

Нет, вы не можете использовать CSS для установки ширины элемента в его атрибут data-width. CSS не позволяет этого, так как attr() доступен только в настоящее время для свойства CSS content, которое доступно только на псевдо-элементах css (::before и ::after).

Как вы можете достичь этого, используя как можно меньше javascript?

Это очень легко сделать, используя собственный хост, предоставленный DOM API.

• Выберите элементы, используя Document.querySelectorAll().

• итерацию элементы и применять стили, используя Element.style, которые могут быть получены из атрибута data-width с помощью Element.dataset

(Demo)

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