动态更改 CSS 内容属性

Changing CSS content property dynamically

本文关键字：属性 CSS 动态      更新时间：2023-09-26

我的一个朋友正在从一家公司租一家网上商店。他能够从不同的模板中进行选择，并且能够覆盖预定义的CSS并添加javascript片段。他让我帮助她进行一些更改，但有些事情我无法处理：添加到购物车按钮。在下面的CSS中，有一个"content"属性，它保存了一个预定义的值。我想根据 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;
}

试试这个：

.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"示例"之前的字符会发生变化。

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

document.documentElement.lang

相关文章：