将元素外其他元素设置成黑色背景并隐藏(开关灯效果)

最新推荐文章于 2022-07-04 14:58:32 发布

原创最新推荐文章于 2022-07-04 14:58:32 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页元素可见性切换及背景颜色改变的方法。通过监听特定按钮点击事件，递归地调整页面中所有子元素的可见性和背景色，实现了网页动态效果。此功能依赖于getElementById, getElementsByTagName, querySelector等DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


  document.getElementById("light").addEventListener('click', function() {
          var dom = document.getElementsByTagName("iframe")[0];
          turnLight(dom);
        	turnBorder(document.querySelector("div[class='artCont']"), "border-top");
          turnBorder(document.querySelector("div[class='mainL830_2']"), "border-right");
	});
  function turnLight(dom){
             if(!dom.parentNode){
               return;
             };
             var list = dom.parentNode.children;
             for(var child of list){
               if(child.id == "divlight"){
                 continue;
               }
               if(child.style != undefined){
                  if( child.style.backgroundColor == "black" ){
                    child.style.backgroundColor = "";
                  }else{
                    child.style.backgroundColor = "black";
                  }

                 if( child == dom){
                  continue
                  }else{
                    if( child.style.visibility == "hidden"){
                       child.style.visibility="visible";
                     }else{
                       child.style.visibility="hidden";
                     }
                  };
               };
             };
             turnLight(dom.parentNode);
};