爲什麼firefox和chrome無法接受帶有僞元素的CSS中的attr（）？

-1

This is what I tried in JSFiddle。它在JSFiddle中工作正常。我能夠訪問與CSS關聯的 attr()。但是，當我在Firefox和Chrome瀏覽器中嘗試這種方式時，瀏覽器還沒有準備好接受它。 Firefox會立即放棄該屬性，並且Chrome會觸發它並添加警告符號。爲什麼這些瀏覽器不接受這attr()？ JSFiddle如何接受它？爲什麼firefox和chrome無法接受帶有僞元素的CSS中的attr（）？

$('div').hover(
    function() 
    { 
     $(this).attr('data-content',':over'); 
     alert($(this).attr('number')); 
    }, 
    function() 
    { 
     $(this).attr('data-content',':out'); 
     alert($(this).attr('number',200+parseInt($(this).attr('number')))); 
    } 
); 

div::after 
{ 
    content: attr(data-content); 
    top: attr(number px); 
}

來源

2014-05-02 Gops AB

JSFiddle不是瀏覽器。它也不是一個編譯器，所以它不會在代碼中吐露錯誤，而這些代碼在瀏覽器中不起作用。 – BoltClock

你把這些功能放在哪裏？如果你把它放在'$（document）.ready'處理程序或'window.onload'處理程序中，它們會根據瀏覽器的不同而發射。 – urbz

@BoltClock，很好。那麼不可能獲取/設置attr（）？ –

CSS attr()不與任何東西，但此刻的content財產的工作，因爲這是它在CSS2.1爲定義的唯一屬性，這是attr()所有瀏覽器目前支持的唯一版本。在CSS3中定義的attr()的擴展版本尚未被任何瀏覽器支持 - 請參閱我對this question的回答。

如果您確實需要根據數據屬性值設置top屬性或僞元素的任何其他屬性，則必須採用較長的路徑：您需要使用JavaScript更改文檔樣式表，例如通過使用addRule()/insertRule()與jQuery的.attr()方法來構建您的CSS規則。 You can't directly access pseudo-elements using jQuery.

來源

2014-05-02 06:02:44 BoltClock

是啊！我已經看到這個答案，它已經不適用於除了內容之外的其他人。但我有點困惑與示例20在http://www.w3.org/TR/css3-values/#attr-notation –

它怎麼樣混淆了你？ – BoltClock

我想訪問僞元素的頂級屬性。我發現了很多答案，包括你的'addRules'，'insertRule'，'attr（）'，但他們都沒有工作。 –

爲什麼firefox和chrome無法接受帶有僞元素的CSS中的attr（）？

回答

相關問題