动态更改 CSS 内容属性答案

【问题标题】：Changing CSS content property dynamically动态更改 CSS 内容属性
【发布时间】：2014-12-03 05:30:53
【问题描述】：

我的一个朋友正在从一家公司租用一个网上商店。他能够从不同的模板中进行选择，并且能够覆盖预定义的 CSS 并添加 javascript sn-ps。他让我帮助她进行一些更改，但有一些我无法处理：添加到购物车按钮。在下面的 CSS 中有一个“内容”属性，它包含一个预定义的值。我想根据 HTML lang 属性动态地更改此属性的值。你知道我怎么能做到这一点吗？（我知道如何获取 lang 属性的值。我的问题是更改“内容”属性的值）

#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;
}

【问题讨论】：

参考this answer，只有使用变通方法才能实现。
谢谢！我能够解决它:)
我更改了你的头像，@BarnabásNagy；那个在这里不太合适。谢谢！

标签： javascript jquery html css

【解决方案1】：

试试这个：

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> 的lang attr 发生变化时，您会看到“example”之前的字符发生变化。

【讨论】：

【解决方案2】：

编写一个更新 CSS 的 Javascript 函数。 Javascript 可以访问 HTML 属性。

document.documentElement.lang

【讨论】：

抱歉，我的要求不清楚。获取 lang 属性的值没有问题。问题在于更改“内容”属性。