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

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:

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') 任何地方:它解析它以提取 url img.jpg，并保留 that。关于您是使用单引号、双引号还是根本不使用引号来包裹 URL 的信息永远消失了。

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

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

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

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