使用JQuery添加CSS类

Question

使用JQuery添加CSS类

jquerycss

12

如何使用JQuery添加/更新css类。

我知道可以使用这个使用JQuery添加css规则来向DOM元素添加css，但我想要添加/删除css类本身。

- gotsp

1

你先看文档了吗？http://api.jquery.com/css/ 和 http://api.jquery.com/class-selector/ - Jeremy

2

您提供的链接是用于添加CSS样式的，如果您想要在已有的基础上添加类，请使用 $("#tagid").addClass('classname');。否则，您可以使用类似 $("#tagid").css("color","red"); 的方式。请参阅 .css。 - Zach L

你能告诉我为什么要将类添加到样式本身吗？这将会附加到 body 上。 - kobe

6个回答

11

使用最新版本的Jquery太容易了，只需像这样：

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

例如：

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

- hcarrasko

最高的答案似乎非常更新。 - Sackidude

9

如果我理解你想做的事情，我相信这个方法适用于你。

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

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

最好使用逻辑小类，并使用jQuery的.toggleClass()方法。

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

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

- ChaseAucoin

3

I have best example of how to apply CSS class in multiple tags.
First create simple html page and inside write down your css.
Next you create simple Query and and apply custom css.
Now if you want apply which tag or attributes css using JQuery.

When I write down this code to easily understand

Code:

<!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>

- hardik

请在你的回答中添加更多的文本来支持你的答案。 - Ioannis Barakos

2

你可以使用jQuery中的addClass和removeClass函数来实现这个。像这样添加类：

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

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

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

你的 CSS 属性应该在 ".myClass" 中定义。

- Joe

1

你读了问题的原始贴吗？原帖作者想要往一个类中添加，而不是添加一个类。 - Naftali

@Neal，但是有更好的方法可以做到这一点，我认为我们应该向OP解释他仍然可以使用addclass和.css来实现相同的效果。 - kobe

1

@kobe，很好，请解释任何相关的观点，但请在评论中或在正确回答实际问题之后这样做。 - Sparky

0

如果您想添加新的类或属性，请使用“add class”。

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

这将向DOM元素添加属性。

如果您想覆盖现有属性，请使用jQuery .css，在您的情况下进行更新。

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

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

- kobe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- William Niu · Accepted Answer

你不能直接使用jQuery更新单独CSS文件中的CSS类。但是，你可以创建一个<style>标签，并添加/覆盖CSS类：

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

当更新CSS类时，您需要注意层叠顺序。否则，可能不会得到您想要的效果。