Question

首先，我的英语不太好，但我相信它足以定义自己在style.css文件中

div.myclass
{
    width:20%;height:350px;background-color:#097;float:left;margin-right:5px;
}

在html文件中

<link rel="stylesheet" type="text/css" href="style.css">
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>

你看，我有这个div，我想用jquery改变它们的背景图像。

我尝试使用.css（）函数

$('div.myclass').css({'background-image':'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==)'})

但功能将div改为此

<div class="myclass" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);"></div>
<div class="myclass" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);"></div>
<div class="myclass" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);"></div>

我问我怎样才能更改样式表文件中的div css规则

div.myclass
{
    width:20%;height:350px;background-color:#097;float:left;margin-right:5px;
}

到此

div.myclass
{
    width:20%;height:350px;background-color:#097;float:left;margin-right:5px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQIW2P8DwSMIMAABQA+HQQDNlbHLwAAAABJRU5ErkJggg==);
}

Answer 1

由于javascript是客户端的，并且仅在检索到服务器的资源后才运行，因此无法更改服务器上的css文件（如果这就是您所要求的）。使用css（）函数将改变内联样式，最终覆盖任何外部样式表。

这很好地回答了： Can jQuery change css style definition? (not individual css of each element)

Answer 2

简单的答案是不应该。你应该使用类并交换它们。但你可以这样做：

$('style').html('div { background-image: image.png; }');

Javascript更改样式表css属性

2 个答案: