【发布时间】：2018-02-02 08:43:00
【问题描述】：
我有几个 div。单击时，我想将单独的 img 元素的 src 设置为用户刚刚单击的 div 的背景图像。
为此，我在用户单击其中一个 div 时运行此函数：
document.getElementById('image--roof').src =
shingleButtons[i].style.backgroundImage.slice(5, -2);
这在 Chrome 中效果很好，但在 Safari 中，.slice() 函数返回不同的值。
在 Chrome 中，单击shingleButtons[i] 会将#image--roof 的src 设置为http://example.com/example.jpg。在 Safari 中，它将其设置为 ttp://example.com/example.jp。
这是一个演示该问题的 Codepen：https://codepen.io/anon/pen/eEjzyg
【问题讨论】：
-
欢迎来到 Stack Overflow！您问题的全部内容必须在您的问题中in，而不仅仅是链接。链接腐烂，使问题及其答案对未来的人们毫无用处，人们不应该离开现场来帮助你。将minimal reproducible example 放入 问题中，最好使用 Stack Snippets（
<>工具栏按钮）使其可运行。更多：How do I ask a good question? 有问题的 CodePen 里面有很多无关的东西，我们根本不清楚我们打算在那里做什么或看到什么。 -
您至少尝试在两个浏览器上记录
shingleButtons[i].style.backgroundImage吗？ -
您的代码依赖于浏览器以完全一致的方式报告样式值（在这种情况下，显然是您所追求的 URL）。那是脆弱的。您最好添加自己的包含 URL 的
data-属性，这样您就可以 100% 确定您可以控制这些值。 -
你做了什么调试？
backgroundImage在 Safari 和 Chrome 上的价值是多少？我向你保证slice在两者上的行为相同，源字符串只是不同。 -
我的调试包括更改切片参数。我（愚蠢地，现在回想起来）没有记录字符串。看起来 Chrome 会返回带有引号的 URL，而 Safari 则不会。我会弄清楚如何添加
data-属性并使用它。
标签： javascript google-chrome safari