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

        }

    }

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

  • wordpress换空间实录,让windows的iis也支持去固定链接index.php化! 2011-02-21
  • 浏览器输入淘宝首页会自动跳转到淘宝特卖频道,何解? 2012-07-14
  • 360极速浏览器在chrome商店无法安装插件提示不支持版本的解决方法 2014-07-11
  • windows多进程间数据通信:内存映射 2015-05-19
  • 线程中使用正则表达式cpu占用100%解决方案 2014-05-29
  • Amazon EC2的Proftpd配置 2013-08-29
  • Amazon EC2的Proftpd连接不上? 2013-08-25
  • Amazon EC2云主机开通过程及Putty的SSH登录说明 2013-08-24
  • 谷歌全球IP奉上! 2014-06-13
  • 自动检测memcached进程,不存在则自动重启(脚本) 2014-11-09
  • 1 Comments For This Post

    1. 上海网站建设 Says:

      感谢分享

    发表评论

    Time limit is exhausted. Please reload CAPTCHA.

       我相信你,不会发广告!

    斗牛SEO工具