CSS屬性的值

width: attr(data-width);

我想知道是否有任何方式有可能使用HTML5的data-屬性，您可以設置CSS content同樣的方法設置CSS值。目前它不起作用。CSS屬性的值

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

來源

2012-03-01 James Kyle

AFAIK你不能只使用CSS。儘管使用JavaScript是完全可能的。 – David 2012-03-01 20:07:42

從語義上講，這是一個壞主意，因爲它打破了標記和佈局的分離。 – 2012-03-01 20:08:02

您需要找到一個更好的示例，因爲上述問題的解決方案使用的是

而不是

。目前我只能想象你的問題在屬性選擇器方面很有趣：http://css-tricks.com/attribute-selectors/ – 2012-03-01 20:14:13

什麼就有什麼，事實上，預知了這樣的特徵，看http://www.w3.org/TR/css3-values/#attr-notation

這fiddle應該像你需要什麼，但會現在不行。

不幸的是，它仍然是一個草稿，並沒有完全在主流瀏覽器上實現。

儘管如此，它對content仍然適用於僞元素。

來源

2012-08-08 18:25:31

是這種css語法'content：attr（data-content）;'跨瀏覽器？它工作到IE8？ – axel 2015-06-22 11:37:39

更新 - 現在這是瀏覽器中可用的功能。 – 2016-11-16 15:28:50

@CaptainHypertext根據'caniuse.com'，這個函數仍然不被支持（除了僞元素的content屬性中的字符串）。 http://caniuse.com/#feat=css3-attr – ne1410s 2016-11-25 08:58:28

理論上是的，有屬性選擇，但我沒有測試過這一點。嘗試：

[data-width="600px"] { 
width: 600px; 
}

http://www.w3.org/TR/CSS2/selector.html#matching-attrs應該幫助你得到你想要

來源

2012-03-01 20:13:25 frank

+10

我想OP的意思是說他不想硬編碼像600px這樣的東西。 – 2012-03-01 20:14:49

當然，我認爲他們只是試圖得到他們想要的外觀明智的......在使用css來做它之前，因此這個問題... – frank 2012-03-02 10:13:13

我用它來隱藏第三方腳本中的一個按鈕（ Shareaholic）。下面的按鈕在移動設備上溢出，所以我使用[data-service =「google_plus」] {display：none}刪除了其中的幾個按鈕： – costumingdiary 2016-03-22 14:15:52

您可以用JavaScript創建一些CSS- rules，您可以在您的樣式後使用：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 + "%"); 
}

這將創建100僞選擇這樣的：

[data-width='1%'] { width: 1%; } 
[data-width='2%'] { width: 2%; } 
[data-width='3%'] { width: 3%; } 
... 
[data-width='100%'] { width: 100%; }

注：這有點偏離主題，而不是你（或某人）想要的東西，但也許有幫助。

來源

2013-06-05 19:58:19 yckart

遺漏的類型錯誤：1172 在main.js：1179 （匿名）@ main.js：1172 （匿名）@ main.js：1179 09:02在main.js無法讀取空的特性 '長度' ：48.363 – 2017-08-27 06:05:13

截至今天，您可以從CSS3聲明中的HTML5 data屬性中讀取一些值。在CaioToOn's fiddle中，CSS代碼可以使用data屬性來設置content。

不幸的是，它不適用於width和height（在Google Chrome 35，Mozilla Firefox 30 & Internet Explorer 11中測試過）。

但有一個來自Fabrice Weinberg的CSS3 attr() Polyfill，它爲data-width和提供支持。你可以在這裏找到它的GitHub倉庫：cssattr.js。

來源

2014-07-14 10:46:36

CSS屬性的值

回答

相關問題