javascript动态实现div变色

最新推荐文章于 2022-11-01 23:35:54 发布

小博士

最新推荐文章于 2022-11-01 23:35:54 发布

阅读量501

点赞数

分类专栏： javascript 文章标签： div javascript function

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
  var divs = document.getElementsByTagName("div");
  var len = divs.length;
  for(var i=0;i<len;i++){
   divs[i].onclick = function(){
    for(var j=0;j<len;j++){
     divs[j].style.backgroundColor = "gray";
                                              divs[j].style.color="gray";
                                              divs[j].style.fontWeight="normal";
    }
    this.style.backgroundColor = "white";
                                    this.style.color="#00BCDE";
                                    this.style.fontWeight="bold";
   };
  }
};
</script>
</head>
<body>
<div id="div1" style="width:100px;height:100px;background:black;margin:10px;">张学友</div>
<div id="div2" style="width:100px;height:100px;background:black;margin:10px;">梁朝伟</div>
<div id="div3" style="width:100px;height:100px;background:black;margin:10px;">周润发</div>
<div id="div4" style="width:100px;height:100px;background:black;margin:10px;">刘德华</div>
</body>
</html>

小博士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript动态实现div变色

<br /><!DOCTYPE html><br /><html><br /><head><br /><script><br /> window.onload = function(){<br /> var divs = document.getElementsByTagName("div");<br /> var len = divs.length;<br /> for(var i=0;i<len;i++){<br /> divs[i].onclick = function(){<br />
复制链接

扫一扫