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

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

javascript html css

Javascript 通过onclick和使用getElementByName更改div css颜色,javascript,html,css,Javascript,Html,Css,这就是我到目前为止使用CSS、Javascript和HTML所做的。。如果单击红色圆圈，它将变为黄色这是可行的，但是，我只想添加一些功能，如果用户单击div之外的任何地方，那么div将返回其原始颜色我怎么做这是我的密码： HTML: JS: 谢谢……）试试这个： function changeColor() { var dd = document.getElementById('circle'); dd.style.backgroundC

这就是我到目前为止使用CSS、Javascript和HTML所做的。。如果单击红色圆圈，它将变为黄色这是可行的，但是，我只想添加一些功能，如果用户单击div之外的任何地方，那么div将返回其原始颜色

我怎么做

这是我的密码：

HTML:

JS:

谢谢……）

试试这个：

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

        }

试试这个：

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

        }

最灵活的方法是在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;
}

#圆圈{
高度：100px；
宽度：100px；
边界半径：100px；
背景：#F00；
边框：2倍实心；
}
#circle.active{
背景：#FF0；
}

切换意味着，如果类不存在，它将应用该类，如果存在，则将其删除。现在，如果您想在单击时添加额外的样式，只需将它们添加到

#circle.active

选择器中即可

最灵活的方法是在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;
}

#圆圈{
高度：100px；
宽度：100px；
边界半径：100px；
背景：#F00；
边框：2倍实心；
}
#circle.active{
背景：#FF0；
}

切换意味着，如果类不存在，它将应用该类，如果存在，则将其删除。现在，如果您想在单击时添加额外的样式，只需将它们添加到

#circle.active

选择器中即可

HTML

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

这里有一个

HTML

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

这里有一个

显示您的代码，您可以在单击事件时将css样式类添加到元素中，并在单击外侧时将其删除。在“圆”周围添加另一个div，使其具有100%的宽度/高度，z索引低于圆。然后单击添加到它…在中显示您的代码您可以在单击事件中将css样式类添加到您的元素中，并在单击外部时删除。在“圆”周围添加另一个div，使其100%宽度/高度，z索引低于您的圆。然后添加点击…当用户点击div外部而不是div时，他想要改变颜色。他不想要切换效果。如果在外部单击，他希望事件应用。

e.target

是一个HTMLElement，您如何将其与其

id

比较到

if

station中？@Fractaliste我不知道。我将其与另一个HTMLElement的圆圈进行比较。当用户在div之外而不是在div上单击时，他希望更改颜色。他不希望切换效果。如果在外部单击，他希望事件应用。

e.target

是一个HTMLElement，您如何将其与其

id

比较到

if

station中？@Fractaliste我不知道。我将其与另一个HTMLElement的圆圈进行比较。

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";
         }
     }
};