动态更改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内容属性

回答

相关问题