Ottenere valore dell'attributo in CSS

Question

ho questo codice HTML:

<div data-width="70"></div> 

voglio impostare la sua larghezza in CSS pari al valore di attributo data-larghezza, per esempio qualcosa del genere:

div { 
    width: [data-width]; 
} 

Ho visto questo è stato fatto da qualche parte, ma non riesco a ricordarlo. Grazie.

Answer 1

questo è quello che cercavo:

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Il problema è che non è supportato nemmeno da alcuni dei principali browser, in questo caso Chrome.

Answer 2

I CSS sono informazioni di stile statico su elementi html specifici e non il contrario. Se si desidera utilizzare i CSS per impostare la larghezza del div Vi suggerisco di fare con l'uso di classi:

HTML:

<div class="foo"></div> 

CSS:

.foo { 
    width: 70px; 
} 

jsFiddle

Answer 3

Non puoi passare il valore dell'attributo dei dati direttamente in css senza contenuto di pseudo tipo. Piuttosto si può fare in questo modo .. CHECK THIS FIDDLE

<div data-width="a"></div><br> 
<div data-width="b"></div><br> 
<div data-width="c"></div> 

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; 
} 

Answer 4

sto solo divertendo con questo, ma una soluzione jQuery sarebbe qualcosa di simile:

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

.foo { 
    background: red; 
    height: 20px; 
    margin-bottom: 10px; 
    width: 0; /** defaults to zero **/ 
} 

jQuery

$(document).ready(function(){ 
    $('.foo').each(function(i) { 
    var width = $(this).data('width'); 
    $(this).width(width); 
    }); 
}); 

Codepen schizzo qui: http://cdpn.io/otdqB

---

TIPO DI UN AGGIORNAMENTO Non è quello che stai cercando, dal momento che vuoi passare una variabile alla proprietà width. Potresti anche usare una classe in questo caso.

HTML

<div data-width='70'>Blue</div> 

CSS

div[data-width='70'] { 
    width: 70px; 
} 

Sketch qui: http://cdpn.io/jKDcH