布爾屬性是控制元素的某一個狀態,是一種比較特別的屬性。由於瀏覽器商之前互相沒協商好,因此在定義布爾屬性時,也有差異。
布爾屬性主要出現 在表單元素上,常見的有radio,checkbox上的checked屬性,option元素的selected屬性,文本域,文本區,密碼域上的readonly屬性,select元素上的multiple屬性,
並且所有 表單元素都支持disabled屬性。
我們在JS設置一個布爾屬性是否發揮作用,通常直接設置true與false
input.disabled = false
由於布爾屬性是一種固有屬性,因此不能使用removeAttribute進行操作。
而在HTML中,只有我們設置了這個屬性,不管它的值是什么,或者干脆就只有屬性名,它都認為其值為true。這是一個大坑,需要大家注意。
在早些年的XHTML規范中,建議大家將屬性名與屬性值寫成一樣,如
<input disabled="disabled" >
由於HTML規范是規定將所有寫在標簽內的屬性名都轉換成小寫,因此disabled與disAbled是一樣的。但在JS寫里就不一樣,如readonly 是對應readOnly,不過事實上,這些大小寫不規則的布爾屬性沒幾個:
defaultChecked,defaultSelected,contentEditable,isMap,noHref,noResize,noShade
下面是分講幾個布爾屬性的用法
- checked: 其實所有表單元素都有此屬性,但只有radio, checkbox能在圖形上表現出勾選的效果,一旦勾選上,其name及value就能提交
- selected: option的屬性,一旦選上,就出現高亮狀態,並將其name,value(沒有就取其innerHTML)提交上去
- readonly: 用於輸入性的控件,讓用戶只能看,不能修改
- disabled: 讓表單元素蒙上一個灰白的色調,用戶無法操作它,也不會提交其內容
- multiple:讓下拉框變成多選形式,可以按着SHIFT進行多選
- hidden: 用於所有元素,這是HTML5新增的布爾屬性,效果如同display:none,但其優先級低於CSS,因此沒有大規范使用
- contentEditable: 應用於所有可見的非表單元素,讓元素也像INPUT那樣編輯它里面的內容
擴展閱讀 - async: 用於script標簽,是近十年出現最有用的屬性,讓腳本不再堵塞頁面加載,早期IE出了一個defer屬性,有關它的區別可見這里