使用 Jquery 更改多个“CSS”不起作用答案

【问题标题】：changing multiple 'CSS' using Jquery not working使用 Jquery 更改多个“CSS”不起作用
【发布时间】：2013-10-25 15:34:13
【问题描述】：

这是我的代码：

var showThis = $(this).attr('id'); // div0, div1, div2 etc.
$('#' + showThis).attr('style', 'background-color: #063 !important, height: 520px');

我需要更改背景颜色、宽度和高度

#showThis

使用上面使用的方法，因为我无法添加或切换类（如果我将类添加到#showThis，它会破坏我的其余代码）。现在我上面的作品，然而，它只会改变背景颜色的高度。我也需要改变宽度。当我添加

width: 20px

像这样

最后，由于某种原因它不起作用。它停止改变宽度和高度，改变背景颜色。它没有给出任何 javascript 错误，因此代码有效并且行确实执行，因为它确实改变了背景颜色，但它为什么不改变宽度和高度而只改变两者之一？

注意：我需要使用 !important 标签（所以我认为 .css 代替 .attr 不起作用），如果有帮助，我正在使用 I.E 8 和 CSS（不是 css3）。

【问题讨论】：

要通过 jQuery 更改 CSS 属性，您应该使用 $('#' + showThis).css({'background-color': '#063', 'height': '520px'}) 等。在我看来，使用预定义样式切换类会容易得多。
也许我遗漏了一些上下文，但$(this) 和$('#' + $(this).attr('id')) 应该选择相同的元素，不是吗？
这在 jQuery 文档中有记录。 @JasonP你是对的。那里有代码冗余。
@Chad 对，但我需要有 !important 标签。当我使用 .css 使用 !important 标记时，它不起作用。
@user2719875 在这种情况下，我会选择类切换选项。 jsfiddle.net/3G6FT

【解决方案1】：

这不是实现您想要的最佳方式 - 正如 Chad 所说，jQuery 具有 css 方法 - 但您希望将新样式的 background-color 和 height 部分用 ; 分开不是，

【讨论】：

【解决方案2】：

您可以使用 .css() 方法来传递具有所需样式的对象作为参数，而不是使用 .attr()：

  $('#' + showThis).css({
       'background-color' : '#063',
       'height': '520px',
       'width': '20px'
    });

编辑：也许这篇 SO 帖子会对您有所帮助：

【讨论】：

【解决方案3】：

你在这里犯了几个错误。

首先，当您使用.attr('style', 'background-color: #063 !important, height: 520px'); 时，您不应将属性与, 分开，而应与; 分开。 这就是它不起作用的原因。

其次，你最好使用Chad提供的解决方案来改变你的CSS，或者添加尝试添加一个类？

第三，

var showThis = $(this).attr('id'); // div0, div1, div2 etc.
$('#' + showThis) //...

没有意义，因为您使用元素的id 稍后检索该元素。只需使用$(this) 而不是这个。

编辑

我不知道你为什么需要!important，但你当然应该避免它，并且更喜欢CSS Precedence。如果您绝对需要覆盖另一个属性，它可能会解决您的问题。

【讨论】：

对，是 ',' 而不是 ';'解决了。我无法更改/添加类，我有一个庞大的脚本和长话短说，如果我向#showThis 添加一个类，那么代码将会中断。第三，是的 $(this) 应该可以工作，我只是将它存储在一个变量中，因为下面几行，我使用了另一个选择器，但稍后需要引用第一个 $(this)。
对，我正在使用 !important 标签，因为它附加了外部 CSS 文件，我不允许更改这些文件。我在一家公司工作，他们希望为所有内容维护特定的 CSS，因此我无法更改外部 CSS，所以我开始只使用 !important 标签，但是是的，CSS 优先级肯定更好。

【解决方案4】：

改用 css() 方法怎么样

var showThis = $(this).attr('id'); // div0, div1, div2 etc.
$('#' + showThis).css({'backgroundColor': '#063', 'height': '520px'});

内联样式不需要使用 !important

背景色也变成了背景色

【讨论】：

嗯，是的，但我需要使用 !important 标签，所以我认为 .css 行不通，我试过了，但它不起作用。
当使用 !important 时，它应该被添加到你的样式表而不是内联样式中。否则你需要让你的选择器有更多的特异性 - coding.smashingmagazine.com/2007/07/27/…

【解决方案5】：

尝试使用一些 Css 类，例如，

CSS

.active{
    background-color: #063 !important;
    height: 520px
}

脚本

使用$(this) 代替$('#' + showThis) 之类的，

$(this).addClass('active');//$(this) instead of $('#' + showThis)

【讨论】：