admin管理员组文章数量:1640612
js 与 jQuery 操作DOM的hidden和disabled以及修改style等方式实现隐藏与显示
问题:
在HTML标签中添加hidden=‘hidden’与disabled=‘disabled’可以实现隐藏标签与禁用标签的功能,但是如何动态去改变这些状态呢?
思路:
通过js修改DOM的属性或者style来实现
方案:
-
css或属性 visibility|display
//用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。 display='none';//隐藏且移除所占用的空间 display='block';//设置可见 visibility = 'hidden';//隐藏但保留所占用的空间 visibility = 'visible';//设置可见 /*js*/DOM.style.visibility = '---'; /*jQuery*/$('').css('visivility','---')
-
属性 hidden 隐藏
//hidden属性在html5中,只要存在,就是隐藏效果,而不论值为多少要显示元素,要删除hidden属性,而不是设置为false //js DOM.removeAttribute('hidden');//取消隐藏 DOM.setAttribute('hidden','hidden');//隐藏 //jQuery $('').removeAttr('hidden');//取消隐藏 $('').prop('hidden','hidden');//隐藏
-
属性 disabled 禁用
//同hidden,disabled只要存在,就是禁用效果 //js DOM.removeAttribute('disabled');//取消j禁用 DOM.setAttribute('disabled','disabled');//禁用 //jQuery $('').removeAttr('disabled');//取消禁用 $('').prop('disabled','disabled');//禁用
-
jQuery快捷隐藏
//这里其实和第一种一样是通过改变style的值达到隐藏的效果 //改变的是display 所以隐藏会移除所占空间! $('').show(); $('').hide();
版权声明:本文标题:js 与 jQuery 操作DOM的hidden和disabled以及修改style等方式实现隐藏与显示 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729319269a1195679.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论