Question

我在html文件中有一个div，定义如下：

<div id="rangeTabAll"></div>

在外部定义的样式表中，我定义了以下样式。

#rangeTabAll{
    top:45px;
    left:124px;
    width:186px;
    height:114px;
    display:none;
    background:#ffffff url(../images/rangetab0.jpg) no-repeat;
}

如何使用jQuery读取/写入背景值？

$('#rangeTabAll').css('background')

方法不会工作，因为它不是内联样式。和

$('#rangeTabAll').attr('class')

未定义。

我可以用javascript做到这一点，但我想知道它是如何通过jQuery完成的。

Answer 1

background是一个“神奇”的CSS属性，可以扩展到所有不同的background-*属性，例如background-image，background-color，background-repeat。

要在jQuery中获取它们，您可以调用$('#rangeTabAll').css('backgroundColor')，依此类推。注意camelCase而不是用破折号分隔单词。

我刚注意到jQuery会将background-color转换为backgroundColor等等，所以您不必担心这一点。您也可以$('#rangeTabAll').css('background-color')。

Answer 2

记住：

简写CSS属性（例如边距，不支持背景，边框）。例如，如果要检索渲染保证金，使用： $（elem）.css（' marginTop '）和 $（elem）.css（' marginRight '），依此类推。

来自jQuery Documentation: CSS

在您的示例中，不支持简写背景，您需要编写完整的属性。

的

#rangeTabAll {
    top:45px;
    left:124px;
    width:186px;
    height:114px;
    display:none;
    background:#ffffff url(../images/rangetab0.jpg) no-repeat;
}

你会写：

$("#rangeTabAll").css("backgroundColor", "myNewValue");
$("#rangeTabAll").css("backgroundImage", "myNewValue");
$("#rangeTabAll").css("backgroundRepeat", "myNewValue");

或

$("#rangeTabAll").css("background-color", "myNewValue");
$("#rangeTabAll").css("background-image", "myNewValue");
$("#rangeTabAll").css("background-repeat", "myNewValue");

Answer 3

为什么不将备用背景定义为CSS类并使用$('#rangeTabAll').addClass('alternate')和$('#rangeTabAll').removeClass('alternate')？

如何使用jQuery读取/写入外部定义的css类的元素的值？

3 个答案: