Question

这是我到目前为止使用CSS，Javascript和HTML完成的工作..如果点击红色圆圈，它将变为黄色这是工作，但我只是想添加一些功能，如果用户点击div之外的任何地方，那么div将恢复到原来的颜色。

我该怎么做？

这是我的代码：

HTML：

<html>
    <body>
        <div id="circle" name="color" onclick="changeColor()"></div>
    </body>
</html>

CSS：

#circle{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: #F00;
    border: 2px solid ; 
}

JS：

function changeColor() {
    document.getElementsByName('color')[0].style.background="#FF0"; 
}

谢谢.. :)）

Answer 1

最灵活的方法是在CSS中添加一个类.active，并在点击时将该类应用到您的圈子中。

如果您想捕捉圈外的点击次数，则必须在正文上设置事件监听器，然后检查e.target以查看它是否与您的元素匹配。

var circle = document.getElementById('circle');
document.onclick = function(e) { //Set the event handler in JavaScript, not in HTML.
    if (e.target === circle) { //e.target is the clicked element.
        circle.classList.add("active");
    }
    else {
        circle.classList.remove("active");
    }
}

然后在你的CSS中：

#circle{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: #F00;
    border: 2px solid ; 
}
#circle.active {
    background: #FF0;
}

Toggle意味着如果不存在，它将应用该类，如果不存在则将其删除。现在，如果您想在点击时添加额外的样式，只需将它们添加到#circle.active选择器。

<强> Demo

Answer 2

试试这个：

 function changeColor() {
            var dd = document.getElementById('circle');
            dd.style.backgroundColor = '#FF0';

        }

Answer 3

HTML

<html>
    <body>
        <div class="circle" id = "color"></div>
    </body>
</html>

CSS

#color{
    height: 100px;
    width: 100px;
    border-radius: 100px;
    background: #F00;
    border: 2px solid ; 
}

JS

document.onreadystatechange = function(){
    if(document.readyState !== 'complete') return;
     var node = document.getElementById('color');
     document.body.onclick = function(evt){
         if(evt.target.id == 'color'){
           node.style.backgroundColor = "#ffff00";
         } else {
           node.style.backgroundColor = "#ff0000";
         }
     }
};

这里是JSBin

通过onclick和使用getElementByName更改div css颜色

3 个答案: