Question

我想让background-image CSS属性的值为url('img.jpg')

我的所作所为：

<div id="mDiv" style="background-image: url('img2.jpg')" ></div>

...

$("#mDiv").css("background-image","url('img.jpg')");

没有jQuery的OR：

document.getElementById("mDiv").style.backgroundImage = "url('img.jpg')";

结果：

<div id="mDiv" style="background-image: url("img.jpg")" ></div>

通缉结果：

<div id="mDiv" style="background-image: url('img.jpg')" ></div>

（我也试过制作style ='...'，但它也被转换为双引号......我该怎样做才能得到想要的结果？）

Answer 1

document.getElementById("mDiv").style.backgroundImage = "url('img.jpg')";

您需要了解的是，浏览器中页面的内容不会存储为标记字符串。该页面是对象和属性的层次结构。

执行上述操作时，或其他答案建议使用setAttribute / attr()的等效版本时，浏览器不一定要在任何地方存储字符串url('img.jpg')：它正在将其解析为提取网址img.jpg，并保留。有关您是否使用单引号，双引号或根本没有引号来包装URL的信息将永远消失。

如果您然后要求将其序列化形式作为标记，例如通过阅读style属性或抓取文档的innerHTML，浏览器必须从属性中重新创建一些标记具有。只要输出代表相同的文档内容，浏览器就可以选择各种任意方式来序列化该数据。

没有理由期望输出看起来很像你输入的标记。特别是，浏览器可能会选择不同的单引号或双引号分隔符;它可能以不同方式排序属性它可能包括不同的空格;等等。

Result:
<div id="mDiv" style="background-image: url("img.jpg")" ></div>

但是，由于嵌套引号，这不是有效的HTML。我认为您正在查看DOM Inspector中的元素，在某些浏览器中，它不一定会向您显示HTML有效输出。如果您获得父元素innerHTML，我认为您会看到内部引号转义为"。

Answer 2

尝试：

$("#mDiv").css("background-image","url(img.jpg)");

Answer 3

您必须使用attr，如下所示：

$("#mDiv").attr({style:"background-image: url(img.jpg)"});

最终代码：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 200px;
            }
        </style>
    </head>

    <body>
        <div id="mDiv" style="background-image:url(http://godfatherstyle.com/wp-content/uploads/2016/02/water-drops-on-flowers-wallpapers.jpg)" >Ehsan</div>
        <button>Change</button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").on("click",function(){
                    $("#mDiv").attr({style:"background-image:url(http://godfatherstyle.com/wp-content/uploads/2016/02/Colourful_Flower_01.jpg)"});
                })
            })
        </script>
    </body>
</html>

＆＃13;

Answer 4

我认为这样做会

$("#mDiv").attr({style:"background-image: url('img.jpg')"});

Answer 5

尝试使用反斜杠转义字符\或使用单独的变量来找到问题的根源：

$（'mDiv'）。css（'background-image'，'url（'+ imageUrl +'）'）;

使用JavaScript / jQuery设置CSS会强制不需要的双引号

5 个答案: