Question

是否可以使用JQuery添加/更新css类。

我知道我可以使用这个add css rule using jquery将DOM添加到DOM元素中，但是我想从css类本身添加/删除。

Answer 1

您无法使用jQuery直接更新单独的css文件中的CSS类。但是，您可以创建<style>标记并添加/覆盖CSS类：

$('<style>.newClass { color: red; }</style>').appendTo('body');

更新CSS类时，您需要注意cascading order。否则，它可能不会成为你所追求的效果。

Answer 2

如果我理解你要做什么，我相信这对你有用。

$("#UniqueName").remove();

$("<style id="UniqueName" type='text/css'> .MyClass{ color:#f00 !important; font-weight:bold !important;} </style>").appendTo("head");

最好有逻辑小班，并使用jQuery's .toggleClass() method。

.Bold{ font-weight:bold; }
.Italic {font-style:italic;}

function SwitchFont(){
$(".MyObjects").toggleClass("Bold");
$(".MyObjects").toggleClass("Italic");
}

Answer 3

使用最新版本的Jquery太容易了，使用类似的东西：

$('jQuery selector').css({"css property name":"css property value"});

例如：

$('#MyDiv').css({"background-color":"red"});

Answer 4

我有一个关于如何在多个标签中应用CSS类的最佳示例。
首先创建一个简单的html页面，然后在其中写下您的CSS。
接下来，您将创建简单的查询并应用自定义CSS。
现在，如果您想使用JQuery应用哪个标签或属性CSS。

当我写下这段代码以便于理解

代码：

<!DOCTYPE html>
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#btn1").click(function(){
          $("h1,p").toggleClass("blue");
          $("div").toggleClass("important");
        });
      });
      </script>
<style>
 .important {
    font-weight: bold;
    font-size: 40px;
    color: chartreuse;
 }
.blue{
    color: #000080;
 }
</style>
</head>             
<body>
  <h1>This is example</h1>
  <p>This is example</p>
  <div>Some important message </div>
  <button id="btn1">Add class </button>
</body>
</html>

Answer 5

您可以通过在jquery中使用addClass和removeClass函数来完成此操作。像这样添加类：

$("#button1").click(function(){
   $(#the_div).addClass('myClass');
});

然后你可以像这样删除它：

$("#button2").click(function(){
   $("#the_div").removeClass('myClass');
});

您的CSS属性应在“.myClass”中定义。

Answer 6

如果要添加新类或属性，请使用add class

http://api.jquery.com/addClass/

将属性添加到DOM元素。

如果要覆盖现有属性，请使用jquery .css，在您的案例中更新

http://api.jquery.com/css/

.css将添加为内联样式，因此所有类属性都将被覆盖

使用JQuery添加到css类

6 个答案: