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

待我称王封你为后i 2021-06-24 16:10 322阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 ⑦HTML+CSS 设置元素背景

背景 ※ background-color background-image background-repeat background-posit

系统管理员/ 2023年07月21日 05:26/ 0 赞/ 1 阅读

相关其他元素

其他元素其他元素其他元素 1. abbr 缩写词 <p> <abbr title="cascading style

超、凢脫俗/ 2023年02月28日 01:44/ 0 赞/ 7 阅读

相关 CSS隐藏元素

![在这里插入图片描述][6d81880bb46d47c28ee0995ed75edfec.png_pic_center] ![在这里插入图片描述][1f4e72f5703

青旅半醒/ 2022年09月16日 00:15/ 0 赞/ 185 阅读

相关 JavaScript开关灯投影效果

[下载地址][Link 1]JavaScript实现的开关灯投影效果，CSS3左右摇摆动画特效。 ![1631561784.png][] dd: [Link 1]: h

痛定思痛。/ 2022年09月11日 09:18/ 0 赞/ 206 阅读

相关 CSS隐藏元素

在制作网页时，隐藏内容也是一种比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。使用CSS即可使

小咪咪/ 2022年08月18日 12:09/ 0 赞/ 228 阅读

相关点击其他区域时隐藏元素

效果说明，除了当前区域外，点击其他任何地方，都会让当前元素区域隐藏。思路很简单，点击整个document,让它隐藏，一层一层向上冒泡，当点击隐藏接触到当前区域时，也就是你不

不念不忘少年蓝@/ 2022年06月05日 01:26/ 0 赞/ 285 阅读

相关怎样将eclipse全部设置成黑色

第一步设置代码的背景主题：我们打开Eclipse，一次按下列顺序操作： 1.Help > Install New Software... 2.Work with：

秒速五厘米/ 2022年05月26日 02:00/ 0 赞/ 206 阅读

相关 jQuery设置元素隐藏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

朴灿烈づ我的快乐病毒、/ 2022年02月03日 06:49/ 0 赞/ 227 阅读

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

document.getElementById("light").addEventListener('click', function() {

待我称王封你为后i/ 2021年06月24日 16:10/ 0 赞/ 323 阅读

相关 jQuery实现开关灯效果案例

效果展示点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。开灯： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

﹏ヽ暗。殇╰゛Y/ 2021年06月22日 15:35/ 0 赞/ 592 阅读