Nhận giá trị của thuộc tính trong CSS

Question

tôi có mã HTML này:

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

Tôi muốn thiết lập chiều rộng của nó trong CSS tương đương với giá trị của thuộc tính dữ liệu chiều rộng, ví dụ một cái gì đó như thế này:

div { 
    width: [data-width]; 
} 

Tôi thấy điều này đã được thực hiện ở đâu đó, nhưng tôi không thể nhớ nó. Cảm ơn.

Answer 1

Đây là những gì tôi đang tìm kiếm:

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

Vấn đề là nó không được hỗ trợ ngay cả bởi một số trình duyệt chính, trong trường hợp này là Chrome.

Answer 2

CSS là thông tin kiểu dáng tĩnh về phần tử html cụ thể và không phải là cách khác. Nếu bạn muốn sử dụng CSS để thiết lập chiều rộng của div của bạn tôi đề nghị bạn làm với việc sử dụng các lớp:

HTML:

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

CSS:

.foo { 
    width: 70px; 
} 

jsFiddle

Answer 3

Bạn không thể chuyển giá trị thuộc tính dữ liệu trực tiếp vào css mà không có nội dung kiểu giả. Thay vào đó bạn có thể làm theo cách này .. 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

Tôi chỉ có vui vẻ với điều này, nhưng một giải pháp jQuery sẽ là một cái gì đó như thế này:

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 phác họa ở đây: http://cdpn.io/otdqB

---

LOẠI AN CẬP NHẬT Không phải những gì bạn đang tìm kiếm, vì bạn muốn chuyển một biến cho thuộc tính chiều rộng. Bạn cũng có thể sử dụng một lớp trong trường hợp này.

HTML

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

CSS

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

Phác thảo ở đây: http://cdpn.io/jKDcH