Question

我正在尝试实现如果元素具有特定background = url(" ")则触发动画的情况。我使用velocity.js作为动画插件，并且能够在除IE之外的所有浏览器上实现此问题，其中它无法识别if语句中的背景URL。

我在下面的代码中有两个例子。

第一个（橙色方块）使用 -

if (box.style.background == "orange")
    { run(); }

确定是否运行动画。 IE就可以了。

然而第二个（粉色三角形）使用 -

if (triangle.style.background == "url(http://garyvoss.co.uk/images/triangle.svg) no-repeat")
    { runTriangle(); }

确定是否运行动画。 IE是唯一不能运行它的浏览器。

有没有人知道我在哪里出错了。

JS Fiddle example

HTML

<div id="box"></div>

<div id="triangle"></div>

CSS

#box {
width: 100px;
height: 100px;
position: absolute; }

#triangle {
width: 200px;
height: 100px;
top: 120px;
position: absolute;
z-index: 4; }

JS

window.setInterval(function runAll() {

var box = document.getElementById('box');

box.style.background = "orange";

function run() {
    Velocity(box, {left: 300}, {easing: "easeInOutQuad", duration: 1000, delay: 0});
    Velocity(box, {left: 10}, {easing: "easeInOutQuad", duration: 1000, delay: 0});
    }

if (box.style.background == "orange")
{ run(); } 

var triangle = document.getElementById('triangle');

triangle.style.background = "url(http://garyvoss.co.uk/images/triangle.svg) no-repeat";

function runTriangle() {
    Velocity(triangle, {left: 300}, {easing: "easeInOutQuad", duration: 1000, delay: 200});
    Velocity(triangle, {left: 10}, {easing: "easeInOutQuad", duration: 1000, delay: 0});
    }

if (triangle.style.background == "url(http://garyvoss.co.uk/images/triangle.svg) no-repeat")
{ runTriangle(); } 

}, 1000);

runAll();

Answer 1

IE中的URL与webkit和/或Gecko不同，将逻辑基于url路径是不安全的。

if (triangle.style.background == "url(http://garyvoss.co.uk/images/triangle.svg) no-repeat" || triangle.style.background == 'url("http://garyvoss.co.uk/images/triangle.svg") no-repeat' )
{ runTriangle(); }

Answer 2

我设法找到了解决这个问题的复杂方法。

使用.match我可以识别url路径的一部分并将其应用于if语句，以便在该部分存在时运行动画。

我在这个JS Fiddle中创建了第三个示例（绿色圆圈），展示了它的工作原理。

var str = circle.style.background; 
var res = str.match(/circle/g);
document.getElementById("check").innerHTML = res;

if (document.getElementById("check").innerHTML === "circle")
{ runCircle(); }

如果background = url（） - 在IE

2 个答案: