javascript - 使用 Jquery 更改多个“CSS”不起作用

Question

这是我的代码：

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 不起作用），如果有帮助，我正在使用 IE 8 和 CSS（不是 css3）。

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

编辑：也许这个 SO 帖子会帮助你：

score 1 · Accepted Answer

你在这里犯了几个错误。

首先，当你使用时，你不应该用but 来.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。如果您绝对需要覆盖另一个属性，它可能会解决您的问题。

score 0 · Accepted Answer

改用 css() 方法怎么样

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

您不需要对内联样式使用 !important

background-color 也变成了 backgroundColor

score 0 · Accepted Answer

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

CSS

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

脚本

使用$(this)而不是$('#' + showThis)喜欢，

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