Tôi muốn biết liệu có thể đặt giá trị css bằng cách sử dụng thuộc tính data- của HTML5 giống như cách bạn có thể đặt css content hay không. Hiện tại nó không hoạt động.Giá trị CSS sử dụng thuộc tính dữ liệu HTML5
HTML
<div data-width="600px"></div>
CSS
div { width: attr(data-width) }
Có, quả thật vậy, sự dự liệu cho tính năng như vậy, nhìn http://www.w3.org/TR/css3-values/#attr-notation
fiddle này nên làm việc giống như những gì bạn cần, nhưng sẽ không phải bây giờ.
Thật không may, nó vẫn là bản nháp và không được triển khai đầy đủ trên các trình duyệt chính.
Mặc dù vậy, nó hoạt động với content trên các phần tử giả.
là cú pháp css này: nội dung: dữ liệu nội dung; nó hoạt động cho đến IE8? – axel
Cập nhật - đây hiện là tính năng có thể sử dụng trong trình duyệt. –
@CaptainHypertext Theo 'caniuse.com', chức năng vẫn không được hỗ trợ rộng rãi (ngoại trừ các chuỗi trong thuộc tính nội dung của các phần tử giả). http://caniuse.com/#feat=css3-attr – ne1410s
Về mặt lý thuyết có, với bộ chọn thuộc tính nhưng tôi đã không kiểm tra này. thử:
[data-width="600px"] {
width: 600px;
}
http://www.w3.org/TR/CSS2/selector.html#matching-attrs sẽ giúp bạn để có được những gì bạn muốn
Tôi đoán rằng OP có nghĩa là anh ta không muốn mã hóa những thứ như 600px. –
Chắc chắn, tôi cho rằng họ chỉ có điều đó để thử và có được những gì họ muốn xuất hiện khôn ngoan .. trước khi sử dụng css để làm điều đó, do đó ... – frank
Tôi đã sử dụng tính năng này để ẩn nút theo dõi từ tập lệnh của bên thứ ba (Shareaholic). Các nút sau bị tràn trên thiết bị di động, vì vậy tôi đã xóa một vài trong số chúng bằng cách sử dụng [data-service = "google_plus"] {display: none} – costumingdiary
Bạn có thể tạo với javascript một số css- rules, mà bạn sau này có thể sử dụng trong phong cách của bạn: http://jsfiddle.net/ARTsinn/vKbda/
var addRule = (function (sheet) {
if(!sheet) return;
return function (selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
}
}(document.styleSheets[document.styleSheets.length - 1]));
var i = 101;
while (i--) {
addRule("[data-width='" + i + "%']", "width:" + i + "%");
}
Điều này tạo ra 100 pseudo-selectors như thế này:
[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }
Note : Đây là một chút offtopic, và không thực sự những gì bạn (hoặc ai đó) muốn, nhưng có thể hữu ích.
Loại không bắt buộcLỗi: Không thể đọc thuộc tính 'length' của null tại main.js: 1172 tại main.js: 1179 (ẩn danh) @ main.js: 1172 (ẩn danh) @ main.js: 1179 09:02 : 48.363 –
Kể từ hôm nay, bạn có thể đọc một số giá trị từ thuộc tính HTML5 data trong khai báo CSS3. Trong CaioToOn's fiddle mã CSS có thể sử dụng các thuộc tính data để đặt content.
Rất tiếc, nó không hoạt động đối với width và height (được thử nghiệm trong Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).
Nhưng có một số CSS3 attr() Polyfill từ Fabrice Weinberg cung cấp hỗ trợ cho data-width và data-height. Bạn có thể tìm thấy repo GitHub ở đây: cssattr.js.
AFAIK bạn không thể chỉ sử dụng CSS. Nó hoàn toàn có thể sử dụng javascript mặc dù. – David
Ngữ nghĩa đây là một ý tưởng tồi bởi vì nó phá vỡ sự tách biệt của đánh dấu và bố trí. –
Bạn cần tìm một ví dụ tốt hơn vì giải pháp cho vấn đề của bạn ở trên là sử dụng
thay vì . Hiện tại tôi chỉ có thể tưởng tượng câu hỏi của bạn thú vị về các bộ chọn thuộc tính: http://css-tricks.com/attribute-selectors/ –