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

待我称王封你为后i 2021-06-24 16:10 262阅读 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 条评论，262人围观）

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

相关阅读

相关 CSS隐藏元素

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

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

相关 JavaScript开关灯投影效果

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

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

相关 CSS隐藏元素

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

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

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

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

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

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

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

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

相关如何将谷歌浏览器背景设置为黑色（亲测）

Dark Reader 简介 Dark Reader是一个护眼扩展程序，通过实时生成黑色主题，为每一个网站启用夜间模式。对于整天对着电脑的朋友来说，把颜色调成暗色的确可以

我不是女神ヾ/ 2022年04月08日 15:50/ 0 赞/ 627 阅读

相关 jQuery设置元素隐藏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

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

相关在元素外插入一个元素

eg：document.body.insertAdjacentHTML("afterend","<p>hello world</p>"); ![watermark_ty

浅浅的花香味﹌/ 2021年10月24日 05:58/ 0 赞/ 236 阅读

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

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

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

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

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

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