js 与 jQuery 操作DOM的hidden和disabled以及修改style等方式实现隐藏与显示

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等方式实现隐藏与显示的全部内容，希望文章能够帮你解决js 与 jQuery 操作DOM的hidden和disabled以及修改style等方式实现隐藏与显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。