题 jQuery将css类更改为div


例如,如果我有一个div元素,并且使用许多css属性定义了类'first'。我是否可以在某些事件中分配css类'second',它也有许多不同的属性定义到同一个div,而无需在行中写入每个属性。


47
2017-12-02 20:05


起源




答案:


$(".first").addClass("second");

如果您想将其添加到活动中,您也可以轻松完成。 click事件的示例:

$(".first").click(function() {
    $(this).addClass("second");
});

59
2017-12-02 20:08



+1用于演示事件处理程序。也许你可以向他展示一个mouseover / mouseout组合,同时添加和删除第二个类:) - Corey Ballou
不要在mouseover / mouseout上添加/删除类,而是尝试使用:hover css选择器。例如:“first:hover”。 - WhyNotHugo


是的,很容易。

$("#mydiv").attr("class", "second");

88
2017-12-02 20:12



谢谢你们所有答案都非常有帮助 - eomeroff
这将覆盖class属性,从div中删除'first'类。我相信用户希望div同时具有“第一”和“第二”类。 - Annabelle
在某些事件上,例如click,我希望div有不同的外观,这是我需要其他类的方式,我更愿意避免两个类在div“first seconf”(如Daff上面写的那样),因为我可能会处理优先级。我可以吗??还有一件事,$(“#mydiv”)。attr(“class”,“second”);这行代码是否同时执行addClass和removeClass?它可以写成$(“。first”)。attr(“class”,“second”); ?? - eomeroff
我对这个问题的理解是他想改变课程,而不是添加更多课程。 - womp
@SonOfOmer - 是的,它正在做两件事。它基本上删除了所有类,并用“second”替换它们。 - womp


您可以使用jQuery添加和删除类,如下所示:

$(".first").addClass("second")
// remove a class
$(".first").removeClass("second")

顺便说一句,您可以使用空格分隔您的标记中的多个类

<div class="second first"></div>

30
2017-12-02 20:09





这可能不完全符合目标,因为我不清楚你想做什么。但是,假设您想要为响应事件而为div分配不同的类,答案是肯定的,您当然可以使用jQuery执行此操作。我只是一个jQuery初学者,但我在我的代码中使用了以下内容:

$(document).ready(function() {
    $("#someElementID").click(function() {  // this is your event
        $("#divID").addClass("second");     // here your adding the new class
    )}; 
)};

如果你想用第二个类替换第一个类,我相信你会首先使用removeClass,然后像上面那样使用addClass。 toggleClass也值得一看。通过示例,jQuery文档可以很好地编写这些类型的更改。

别人我有更好的选择,但我希望有所帮助!


3
2017-12-02 20:20





像div这样的HTML元素可以有多个类。假设使用addClass方法为div分配了两个样式。如果style1有3个属性,比如font-size,weight和color,而style2有4个属性,比如font-size,weight,color和background-color,那么我认为得到的有效属性set(style)将有4个属性,即union所有款式套装。常见属性,在我们的例子中,颜色,字体大小,重量,将有一个具有最新值的occuerance。如果div首先被分配了style1而第二个被赋予了style2,那么常见的prpoerties将被style2值覆盖。

此外,我写了一篇文章 使用JQuery应用,删除和管理样式,我希望它会对你有所帮助

问候 AWAIS


2
2017-07-14 04:47





$(document).ready(function () {

            $("#divId").toggleClass('cssclassname'); // toggle class
});

**OR**

$(document).ready(function() {
        $("#objectId").click(function() {  // click or other event to change the div class
                $("#divId").toggleClass("cssclassname");     // toggle class
        )}; 
)};

0
2018-01-03 13:30