Question

有没有办法动态更改图标的背景颜色？我知道如何永久改变它：

ui-icon-location:after{background-color: red;}

事情是，只有当我使用Cordova的watchPosition距离某个位置一定距离时，我才想将背景更改为红色。默认情况下，图标的背景为

.ui-icon-location:after{background-color: #3399FF;}

一切正常，图标是我唯一喜欢的工作方式。我很感激任何想法。

谢谢！

Answer 1

您可以对此功能内的距离应用测试，并使用if或switch声明更改颜色：

JavaScript

    setInterval(function(){

    function resetStyle(elemClass) {

        switch(expression) {
            case Position:
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'red';
                break;
            case Position2: 
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'black';
                break;
            default:
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'defaultColor'; 
        }


    }

}, 100);

你也可以使用setInterval来跟踪变化并抓住位置，这里有一个功能可以帮助你找到窗口中元素的位置，它对你的测试很有用：

// get position fuction

 function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

Answer 2

您可以使用jquery动态更改css。

("div").hover(function(){
$("#yourElementId").css("ui-icon-location:after{background-color: #3399FF;}");
});

但最好使用addClass和removeClass函数。

// CSS

.ui-icon-location：{background-color：＃3399FF;}

之后

// Jquery的

("div").hover(function(){
$("#yourElementId").addClass("ui-icon-location");
});

这将调用css类并完全按照您在css类中定义的内容进行操作。类似的你可以使用removeClass来删除css类。

动态更改jQuery移动图标背景颜色

2 个答案: