如何在Jquery中使用条件覆盖外部CSS?

q0qdq0h2  于 2023-10-17  发布在  jQuery
关注(0)|答案(4)|浏览(122)

实际上,我有一个不同国家的不同语言的应用程序,外部CSS是使用类和ID为页面上的所有HTML元素定义的。我想要的是改变一个特定国家的整个网站的字体,但我不想这样做,通过应用CSS的所有类一次又一次。所以有没有一种方法,我可以改变整个网站的CSS(字体)在一去或使用一个方便的方式。

j0pj023g

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-elementfont-family,它将影响所有的子元素,而不必一次又一次地为所有这些子元素添加类。

ocebsuys

ocebsuys2#

你可以试试这样的东西:

$('.mysentence').css('font-face', "Arial,sans-serif");
des4xlb0

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标签的东西,然后简单地将其用作父选择器而不是国家/地区。

xmjla07d

xmjla07d4#

好吧,我已经使用$('*')将CSS应用于所有元素,对于动态创建的元素,我们可以使用“DOMNodeInserted”事件来处理动态创建的元素。

相关问题