JS控制显示

控制显示

我想写这篇文章终于不是关于面试的，而是在写代码的时候需要控制元素的显示，我最终用了h5的属性hidden，但浮现在我脑海的有很多，像visible，display：none等等，但是当我使用hidden的时候，我以为是通过true和false来控制的，搞来好去发现这竟是用增加或移除属性来控制的，于是我整理了以下控制显示的方法。

1. Hidden

HTML全局属性，hidden属性规定对元素进行隐藏，如果使用该属性，则会隐藏元素，可以对hidden属性进行设置，使用户在满足某些条件的情况下才能看到元素，可以使用Javascript对属性进行删除。
使用：<p hidden="hidden">这是一段隐藏的段落。</p>

删除：
$("p").removeAttr("hidden") (JQ)

document.getElementByTagName(“p”).removeAttribute(“hidden”)(原生)

增加：
$(“p”).attr(“hidden”,’hidden’) (JQ)

 // 获取节点 原生
	var h1=document.getElementsByTagName("H1")[0];
    // 生成属性
	var att=document.createAttribute("class");
    // 设置属性值
	att.value="democlass";
    // 把属性赋予节点
	h1.setAttributeNode(att);

2. display:none

display是css样式，那我们就通过控制class，通过 增加或删除class。
JQ的方法是addClass和removeClass
原生就使用document.getELementById(id).classList.add(class)

document.getELementById().classList.remove(class)。
classList是h5新增的，用于增加、移除或切换css中的类，classList是只读的，但可以用add和remove来修改它。
因为class也是属性，所以如果要增加class也是可以使用上述增加hidden属性中的原生的JS写法。但是不推荐JS控制增加或者删除一个类来达到隐藏的效果。但是可以使用selector.style.diplay="none"这种方法

3.visibility:hidden
visibility与display都是css样式，但是不同的是display:none不占据页面控件而visibility是占据页面空间的。visibility还有值为visible（显示），那因为同时css样式，使用方法和display雷同，这里就不多说了。
4.slideToggle()
JQ方法，通过使用滑动效果（高度变化）来切换元素的可见状态，如果元素是隐藏的，则显示，如果元素是可见的，则会隐藏这些元素
语法：$(selector).slideToggle(speed(毫秒),callback)
5.hide() show()
JQ方法，与display:none类似，不影响布局

语法：$(selector).hide(speed,ease,callback)
分享就到这里了，如果有什么不足的请指出，我会慢慢补足的