admin管理员组

文章数量:1640626

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

本文标签： 操作方式jqueryjsDOM

版权声明：本文标题：js 与 jQuery 操作DOM的hidden和disabled以及修改style等方式实现隐藏与显示 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729319269a1195679.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。