动态更改CSS内容属性 [英] Changing CSS content property dynamically
问题描述
我的一个朋友正在从一家公司租一家网上商店。他能够从不同的模板中进行选择，并且能够覆盖预定义的CSS并添加JavaScript代码段。他请我帮助她做几个改变，但有一些我不能处理的：添加到购物车按钮。在下面的CSS中有一个content属性，它保存一个预定义的值。我想基于HTML lang属性dinamically更改此属性的值。你有什么想法如何实现这一点？ （我知道如何获取lang属性的值。我的问题是更改content属性的值）
#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_cartdata-content => example< / div>
CSS：
code> #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））
你会看到'example'之前的字符会改变 lang attr的< html> 已更改。
A friend of mine is renting a webshop from a company. He is able to choose from different templates, and has the ability to override the predefined CSS and add javascript snippets. He asked me to help her making several changes, but there is something I cannot deal with: the add to cart button. In the below CSS there is a "content" property that holds a predefined value. I would like to change the value of this property dinamically, based on the HTML lang attribute. Do you have any idea how could I achieve this? (I know how to get the value of the lang attribute. My problem is changing the value of the "content" property)
#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;
}
Try this:
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"));
You'll see that the character before 'example' changes when lang attr of <html> is changed.
这篇关于动态更改CSS内容属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
