使用jquery/javascript切换div的css属性

我正在尝试编写一个代码，在其中可以切换div的CSS属性。基本上，我正在尝试创建一个具有正常状态和活动状态的按钮

它的正常颜色是蓝色，但一旦单击它，它就会变成绿色。再次单击它，它会变回蓝色

CSS:

HTML:

我的代码的问题是，由于某种原因，当我单击按钮时，按钮消失了，好像它正在滑出。

Toggle方法显示/隐藏每个调用中的元素

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

Toggle方法显示/隐藏每个调用中的元素

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

---

您未正确使用

.toggle（）

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

---

您未正确使用

.toggle（）

$('.lblue').click(function() {
    $(this).toggleClass('lgreen');
});

---

使用纯javascript，您可以使用类列表切换

---

由于这是一个全新的功能，请参见：对于浏览器与普通javascript的兼容性，您可以使用类列表切换

---

由于这是一个全新的功能，请参见：对于浏览器兼容性，我不能同意其余的答案。即使它们是正确的，但在语义上似乎并不正确，元素的类将同时包含

lblue

和

lgreen

类名：

<div class="lblue lgreen">Soul</div>
            ^^^^^^^^^^^^-- this is bad

如果所有元素的初始状态均为蓝色，则：

$(".lblue").click(function(){
  $(this).toggleClass("lblue lgreen");
});​

前者适用于动态添加的元素，后者不适用

---

我不能同意其余的答案。即使它们是正确的，但在语义上似乎并不正确，元素的类将同时包含

lblue

和

lgreen

类名：

<div class="lblue lgreen">Soul</div>
            ^^^^^^^^^^^^-- this is bad

如果所有元素的初始状态均为蓝色，则：

$(".lblue").click(function(){
  $(this).toggleClass("lblue lgreen");
});​

前者适用于动态添加的元素，后者不适用

---

我想你可以检查一下颜色，然后执行一项活动

例如）

与你的情况一样： 初始颜色=蓝色。 变换颜色=绿色

$('button handler').click(function () {
  if($(this).css('background-color') == 'BLUE') { 
    $(this).css('background-color', 'GREEN'); 
  } else { 
    $(this).css('background-color', 'BLUE'); 
  }
});

---

只是我的猜测。我真的不知道你到底在找什么。

我想你可以检查一下颜色，然后表演一个活动

例如）

与你的情况一样： 初始颜色=蓝色。 变换颜色=绿色

$('button handler').click(function () {
  if($(this).css('background-color') == 'BLUE') { 
    $(this).css('background-color', 'GREEN'); 
  } else { 
    $(this).css('background-color', 'BLUE'); 
  }
});

---

只是我的猜测。我真的不知道您到底在寻找什么。

在回调中使用

$（this）

，否则您可能会遇到问题。没问题。我收回了我的-1:）注意，这个答案取决于类名

lblue

和

lgreen

的定义顺序。如果颠倒顺序，它很可能会停止工作，所有元素都将

lblue

。我用自己的答案（部分）回答了这个问题，正确的答案，糟糕的解释。不要只是在操作时抛出一块代码。在回调中使用

$（this）

，否则您可能会遇到问题。没问题。我收回了我的-1:）注意，这个答案取决于类名

lblue

和

lgreen

的定义顺序。如果颠倒顺序，它很可能会停止工作，所有元素都将

lblue

。我用自己的答案（部分）回答了这个问题，正确的答案，糟糕的解释。不要只是在OP上抛出一块代码。@Alexander“这绝对不会生成青色元素”有很多方法会使这条语句出错，即：在css中的“lblue”类之后定义“lgreen”类或使用“！“重要”。如果css结构良好，我认为“切换”解决方案更干净。@nienn，不是这样。但是，我同意。我将减少我的讽刺，并在@Alexander中将其清理干净，因为你重新编辑了你的帖子我的评论不再有意义=）。你的后一个解决方案更干净。我仍然认为，如果你保持一个结构良好的CSS，你可以考虑这两个类。这允许您重用lgreen类中的属性（在这个特定的例子中，我同意您的观点，即包含颜色名称的类可能会使其违反直觉）。@nienn，我还关心功能，尽管不仅仅是样式；）诚然，每个都有自己的优势，我会为每个具体情况选择最适合的。@Alexander“这绝不会生成青色元素”有很多方法会使这句话出错，即：在css中的“lblue”类之后定义“lgreen”类或使用“！“重要”。如果css结构良好，我认为“切换”解决方案更干净。@nienn，不是这样。但是，我同意。我将减少我的讽刺，并在@Alexander中将其清理干净，因为你重新编辑了你的帖子我的评论不再有意义=）。你的后一个解决方案更干净。我仍然认为，如果你保持一个结构良好的CSS，你可以考虑这两个类。这允许您重用lgreen类中的属性（在这个特定的例子中，我同意您的观点，即包含颜色名称的类可能会使其违反直觉）。@nienn，我还关心功能，尽管不仅仅是样式；）诚然，每种方法都有自己的优点，我会选择最适合每种具体情况的方法。我很欣赏简单的Javascript解决方案，但是：为什么不使用OP提到的类呢？此外，您还应该说明一些关于浏览器支持的内容。根据您的建议进行编辑。我很欣赏纯Javascript解决方案，但是：为什么不使用OP提到的类呢？此外，您还应该说明一些有关浏览器支持的信息。请按照您的建议进行编辑。

$('button handler').click(function () {
  if($(this).css('background-color') == 'BLUE') { 
    $(this).css('background-color', 'GREEN'); 
  } else { 
    $(this).css('background-color', 'BLUE'); 
  }
});