動態更改CSS內容屬性

我的一位朋友正在從一家公司租用網上商店。他可以從不同的模板中進行選擇，並且可以覆蓋預定義的CSS並添加JavaScript片段。他讓我幫她做出一些改變，但有一些我無法處理：添加到購物車按鈕。在下面的CSS中有一個「content」屬性，它保存了一個預定義的值。我希望根據HTML lang屬性以不同的方式更改此屬性的值。你有什麼想法我怎麼能做到這一點？（我知道如何獲得lang屬性的值，我的問題是改變「content」屬性的值）動態更改CSS內容屬性

#add_to_cart:before { 
    display: block; 
    font-family: 'sosa'; 
    font-size: 35px; 
    content: "Ä"; 
    padding-right: 5px; 
    font-weight: 400; 
    width: 71px; 
    height: 71px; 
    line-height: 65px; 
    text-align: center; 
    text-indent: 0; 
    text-shadow: none; 
    color: #fff; 
}

來源

2014-12-02 Barnabás Nagy

請參閱[本答案]（http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after），它只能使用變通方法。 – Azeirah 2014-12-02 21:15:40

謝謝！我能解決它:) – 2014-12-02 21:47:29

我改變了你的個人資料圖像，@BarnabásNagy;這在這裏並不合適。謝謝！ – 2014-12-02 22:09:27

編寫一個更新CSS的Javascript函數。 Javascript可以訪問HTML屬性。

document.documentElement.lang

來源

2014-12-02 21:03:29

對不起，我不清楚我的要求。我對獲取lang屬性的值沒有任何問題。問題在於改變「內容」屬性。 – 2014-12-02 21:07:29

試試這個：

HTML：

<html lang="en"> 
... 
<div id="add_to_cart" data-content="">example</div>

CSS：

#add_to_cart:before { 
    display: block; 
    font-size: 35px; 
    content: attr(data-content); 
    padding-right: 5px; 
    font-weight: 400; 
    width: 71px; 
    height: 71px; 
    line-height: 65px; 
    text-align: center; 
    text-indent: 0; 
    text-shadow: none; 
    color: red; 
}

JS：

$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));

當的<html>屬性發生變化時，您會看到'example'前面的字符發生了變化。

來源

2014-12-02 21:30:53

動態更改CSS內容屬性

回答

相關問題