關於disabled的事,你用對了嗎?

你們都知道disabled屬性用來禁用表單裏的元素。若是讓你來禁用一個表單元素,你會怎麼作麼,下面提供幾種寫法,各位看官請看html

html: <button type='button'>test</button>
 var btn=document.querySelector('button');
 1.  btn.disabled=true;
 2.  btn.disabled='disabled';
 3.  btn.setAttribute('disabled',true);
 4.  btn.setAttribute('disabled','disabled')

通過試驗,上述幾種寫法都生效了,咱們都知道,在html5中disabled是一個布爾值,上述幾種寫法渲染出來以後,在他的properties裏能夠查看到這些都是爲true,3,4,方法中,元素的標籤上分別爲html5

3. <button type='button' disabled='true'>test</button>
4. <button type='button' disabled='disabled'>test</button>

圖片描述

若是要從新激活這個按鈕的話,你可能看到過下面的幾種寫法spa

1. btn.disabled=false;
2. btn.disabled="";
3. btn.setAttributed('disabled',false);// 不生效
4. btn.removeAttribute('disabled');

這個時候就有小夥伴站出來了,第三種寫法爲何不生效呢???
實際上是這樣子的,在html5裏面,disabled是一個布爾值,咱們能夠設置他的值爲true或者false,而在XHTML裏面disabled是一個常規的屬性,設置他的值就是用setAttribute,因此用setAttribute('disabled',false) 是不生效的code

因此,正規的寫法是htm

1. btn.disabled=true;
   btn.disabled=false;

2. btn.setAttribute('disabled','disabled');
   btn.removeAttribute('disabled');
相關文章
相關標籤/搜索