Question

我的一位朋友正在租用一家公司的网上商店。他可以从不同的模板中进行选择，并且能够覆盖预定义的CSS并添加javascript片段。他让我帮他做了一些改动，但有一些我无法处理的事情：添加到购物车按钮。在下面的CSS中有一个＆＃34;内容＆＃34;包含预定义值的属性。我想基于HTML lang属性以dinamically的方式更改此属性的值。你知道我怎么能做到这一点？（我知道如何获取lang属性的值。我的问题是改变＆＃34;内容＆＃34;属性的值）

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

Answer 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"));

你会在＆＃39;示例＆＃39;之前看到该字符。 lang attr <html>更改时的更改。

Answer 2

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

document.documentElement.lang

动态更改CSS内容属性

2 个答案: