实际上,我有一个不同国家的不同语言的应用程序,外部CSS是使用类和ID为页面上的所有HTML元素定义的。我想要的是改变一个特定国家的整个网站的字体,但我不想这样做,通过应用CSS的所有类一次又一次。所以有没有一种方法,我可以改变整个网站的CSS(字体)在一去或使用一个方便的方式。
j0pj023g1#
你不需要一次又一次地给所有元素添加Class。在body中添加class就足以解决您的问题。请看下面的代码。
if(/* Check your users's country, suppose that your users are in China */){ $("body").addClass("font-chinese"); } else if(/* So on */) { // keep on adding body class }
你的CSS文件
body { font-family: default-font; } body.font-chinese .container-element { font-family: chinese-font; } body.font-another-country .container-element { font-family: another-font; }
你在.container-element中的子元素将使用从.container-element继承的CSS属性,所以你只需要改变.container-element的font-family,它将影响所有的子元素,而不必一次又一次地为所有这些子元素添加类。
.container-element
font-family
ocebsuys2#
你可以试试这样的东西:
$('.mysentence').css('font-face', "Arial,sans-serif");
des4xlb03#
由于你说有ID设置的样式,唯一真正覆盖这些而不为每个元素做特定样式的方法是内联样式。为了避免像上面的例子那样为每个类设置它,你可以这样做:$('h1, h2, h3, h4, h5, h6, p, a').css('font-family', 'verdana');在选择器部分(第一部分)中,你可以遍历this list并获取所有相关元素-或者更好:浏览几个你将要使用的页面样本,并从中选择相关的html元素。不会花那么长时间的。对于使您的解决方案只适用于特定语言/国家的部分,我会这样做:$('h1, h2, h3, h4, h5, h6, p, a', 'body.en-us, body.en-ca').css('font-family', 'verdana');然后你可以将class 'en-us','en-ca','fr-fr'应用到body标签中,并使用它来针对这些特定国家的JavaScript更改。根据您需要做什么样的更改或需要为多少个国家/地区执行此操作,另一种方法可以是为这些国家/地区应用“font-verdana”类或类似于body标签的东西,然后简单地将其用作父选择器而不是国家/地区。
$('h1, h2, h3, h4, h5, h6, p, a').css('font-family', 'verdana');
$('h1, h2, h3, h4, h5, h6, p, a', 'body.en-us, body.en-ca').css('font-family', 'verdana');
xmjla07d4#
好吧,我已经使用$('*')将CSS应用于所有元素,对于动态创建的元素,我们可以使用“DOMNodeInserted”事件来处理动态创建的元素。
4条答案
按热度按时间j0pj023g1#
你不需要一次又一次地给所有元素添加Class。在body中添加class就足以解决您的问题。请看下面的代码。
你的CSS文件
你在
.container-element
中的子元素将使用从.container-element
继承的CSS属性,所以你只需要改变.container-element
的font-family
,它将影响所有的子元素,而不必一次又一次地为所有这些子元素添加类。ocebsuys2#
你可以试试这样的东西:
des4xlb03#
由于你说有ID设置的样式,唯一真正覆盖这些而不为每个元素做特定样式的方法是内联样式。
为了避免像上面的例子那样为每个类设置它,你可以这样做:
$('h1, h2, h3, h4, h5, h6, p, a').css('font-family', 'verdana');
在选择器部分(第一部分)中,你可以遍历this list并获取所有相关元素-或者更好:浏览几个你将要使用的页面样本,并从中选择相关的html元素。不会花那么长时间的。
对于使您的解决方案只适用于特定语言/国家的部分,我会这样做:
$('h1, h2, h3, h4, h5, h6, p, a', 'body.en-us, body.en-ca').css('font-family', 'verdana');
然后你可以将class 'en-us','en-ca','fr-fr'应用到body标签中,并使用它来针对这些特定国家的JavaScript更改。根据您需要做什么样的更改或需要为多少个国家/地区执行此操作,另一种方法可以是为这些国家/地区应用“font-verdana”类或类似于body标签的东西,然后简单地将其用作父选择器而不是国家/地区。
xmjla07d4#
好吧,我已经使用$('*')将CSS应用于所有元素,对于动态创建的元素,我们可以使用“DOMNodeInserted”事件来处理动态创建的元素。