Javascript 如果背景=url（）-IE上的问题

我试图实现这样一种情况：如果元素具有特定的

background=url（“”

），则会触发动画。我使用velocity.js作为动画插件，能够在除IE之外的所有浏览器上实现这一点，IE无法识别if语句中的背景url

下面的代码中有两个示例

第一个（橙色正方形）使用-

以确定是否运行动画。我对这个没意见

但是，第二个（粉红色三角形）使用-

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

有人知道我哪里出了问题吗

HTML

JS

---

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(); } 

---

我设法找到了一个绕着这个问题的错综复杂的办法

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

我在这里创建了第三个示例（绿色圆圈），展示了它是如何工作的

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

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

---

你有没有检查一下IE上的

triangle.style.background

是什么样子的？这很可能就是问题所在。复合属性可能很棘手。我可能会分别查看

backgroundImage

和

backgroundRepeat

。因此，我可能会使用类。

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

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

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

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

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();

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(); } 

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

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