Categorized | 网络技术

Tags | , ,

使用JavaScript控制HTML元素的显示和隐藏

发布于 2023年02月10日 更新于 2023年02月10日 

利用来JS控制页面控件显示和隐藏有四种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一:
document.getElementById(“EleId”).style.visibility=”hidden”;
document.getElementById(“EleId”).style.visibility=”visible”;
利用上述方法实现隐藏后,页面的位置还被控件占用,显示空白。

方法二:
document.getElementById(“EleId”).style.display=”none”;
document.getElementById(“EleId”).style.display=”inline”;
利用上述方法实现隐藏后,页面的位置不被占用。

方法三:设置元素的透明级别

document.getElementById(“EleId”).style.opacity = 0,  
设置后元素完全透明,还占位置

document.getElementById(“EleId”).style.opacity = 1,  
设置后元素完全不透明(显示)

方法四:
显示元素进行隐藏

document.getElementById(“ID名”).hidden=ture;
根据页面元素ID名获得页面元素值,进而将其属性设置成隐藏。

将隐藏元素进行显示
对于已经隐藏的页面元素如果要将其再次显示,不是将document.getElementById(“ID名”).hidden=false;
而是将其隐藏属性删除 
document.getElementById(“ID名”).removeAttribute(“hidden”);
 

示例:

 //控制显示与不显示

    if (srcjs.hysum == null || srcjs.hysum.length == 0) {

        document.getElementById(“hysumTable”).hidden = true;

    } else {

        document.getElementById(“hysumTable”).removeAttribute(“hidden”);

        for (var i = 0; i < srcjs.hysum.length; i++) {

            var hyvo = srcjs.hysum[i];

            hysumAddRow(“hysum”, hyvo);

        }

    }

看了此文的人貌似还看了这些:

  • linux系统禁ping及改ssh端口 2017-10-25
  • windows多进程间数据通信:内存映射 2015-05-19
  • Microsoft Office 2010 Pro Plus专业增强版VOL安装教程 2012-09-03
  • Amazon EC2的V-P-N-PPTP搭建教程(on aws redhat6.5 X64) 2014-10-20
  • winhttp api和com对象版区别 2017-05-10
  • wordpress如何给read more和comment评论链接添加nofollow? 2013-08-26
  • 亲,中秋国庆福利来了~【2012版倒计时】 2012-10-01
  • Amazon EC2的Proftpd配置 2013-08-29
  • 密码保护:Mindjet MindManager2016 可用版 2017-03-06
  • LNMP及LANMP环境一键搭建教程 2013-08-25
  • 1 Comments For This Post

    1. 上海网站建设 Says:

      感谢分享

    发表评论

    Time limit is exhausted. Please reload CAPTCHA.

       我相信你,不会发广告!

    斗牛SEO工具