html5全局屬性

時間 2019-11-09

標籤 html5 html 全局屬性欄目 HTML5 简体版

原文原文鏈接

全局屬性：對於任何一個標籤都是可使用的屬性。javascript

1、data-*

在html5以前須要在html標籤上添加自定義屬性來存儲和操做數據，多是會寫<form role="xxx">，但這是種很是不規範的方式。css

也正是由於有這種自定義屬性的需求，在html規範裏增長了自定義屬性data-*屬性。html5中開發人員可自定義任何想要的屬性，只要加上前綴data-，經過這種方式避免與將來的html版本衝突。html

<form data-type="comment" class="container">
...
</form>

data-*自定義屬性不影響頁面佈局，但可讀可寫。下面介紹怎樣讀寫。html5

一、獲取自定義屬性

獲取時經過dataset對象，使用"."來獲取屬性，須要去掉data-前綴。java

html:jquery

<div id='test' data-age="23">html5 data-*自定義屬性 data-age</div>

js獲取自定義"data-*"屬性瀏覽器

var oDiv=document.getElementById("test");
alert(oDiv.dataset.age);

jquery獲取編輯器

$('#test').data('age');

二、獲取帶連字符的自定義屬性

遇到自定義屬性中有連字符須要轉化爲駝峯命名。wordpress

html:佈局

<div id='test' data-user-list="user-list">html5 data-*自定義屬性data-user-list屬性</div>

js獲取：

var oDiv=document.getElementById("test");
alert(oDiv.dataset.userList);

jquey獲取：

$('#test').data('userList');

三、動態設置data-*自定義屬性值

js設置

<div id='test' data-user-list="user-list">html5 data-*自定義屬性data-user-list屬性</div>
<script type="text/javascript">
var oDiv=document.getElementById("test");
alert(oDiv.dataset.userList);
oDiv.dataset.name="starof";
alert(oDiv.dataset.name);
</script>

網頁被修改成：

<div id="test" data-user-list="user-list" data-name="starof">html5 data-*自定義屬性data-user-list屬性</div>

jquery設置：

$('#test').data('name','starof');

四、getAttribute和setAttribute

也能夠經過setAttribute()和getAttribute()方法來設置和獲取data-*自定義屬性

<div id='test' >html5 data-*自定義屬性 data-age</div>
<script>
var oDiv=document.getElementById("test");
oDiv.setAttribute("data-age","23");
alert(oDiv.getAttribute("data-age"));
</script>

2、hidden布爾值

表示元素的不可見狀態，有2個值，true和false。

html:用css中display:none實現。

html5：

<label hidden>看不見 </label>

原理：hidden本質上仍是設置相似display:none的效果。

舉例探究：上面例子中label標籤是不可見的，如今顯示設置其display屬性，儘管有hidden屬性，仍是能夠看見元素。

<label hidden style="display:inline;">看不見 </label>

若是不顯示設置display屬性，則設置了hidden屬性的元素display計算值爲none，將脫離文檔流，不顯示。

3、spellcheck

規定是否必須對元素進行拼寫或語法檢查。用了spellcheck屬性，瀏覽器會幫助檢查html元素文本內容拼寫是否正確，只有當html元素在可編輯狀態，sepllcheck屬性纔有意義，因此通常是針對input[text],textarea元素用戶輸入內容進行拼寫和語法檢查，拼寫錯誤有紅色的波浪下劃線，右鍵會給提示。

舉例：

<textarea spellcheck="true" cols="60" rows="5"> </textarea>

4、tabindex

tabindex 屬性規定元素的 tab鍵切換順序（當 tab 鍵用於導航時），可將tabIndex屬性設成1到32767的一個值。

Note：tabindex屬性設爲一個負值（如tabindex="-1")時，用戶使用tab鍵切換時該html元素將不會被選中。

舉例：

<form>
　　　　<label>姓名: <input type="text" name="name" tabindex="2"/></label>
　　　　<br/>
　　　　<label>身份證號: <input type="text" name="city" tabindex="-1"/></label>
　　　　</br>
　　　　<label>准考證號: <input type="text" name="country" tabindex="1"/></label>
　　　　</br>
　　　　<input type="submit" value="查詢" tabindex="3"/>
</form>

5、contenteditable

一、基本用法

是否容許用戶編輯內容，是個很是神奇的屬性，一般咱們使用的輸入文本內容的標籤是input和textarea，使用contentEditable屬性後，能夠在div,table,p,span,body等不少元素中輸入內容。。點擊時出現一個編輯框。配合js對網頁內容局部修改。過去要使用輸入框替代。

當一個元素的contenteditable狀態爲true（contenteditable屬性爲空字符串，或爲true，或爲inherit且其父元素狀態爲true）時，意味着該元素是可編輯的。不然，該元素不可編輯。

舉例：

<p contenteditable>個人內容可修改</p>

能夠自定義樣式以下：使用輪廓線代替邊框，由於它不會向盒狀模型添加元素，因此頁面區域不會在觸發時忽然閃現。

[contenteditable]:hover, [contenteditable]:focus { 
    outline: 2px dotted red; 
}

若是想要整個網頁可編輯，可在body或html標籤內設置contentEditable。這樣就和下面將要介紹的desginMode效果很像了。

二、分享幾個有意思的應用

contenteditable在但願用戶可以與演示交互和更改值的教程時它很是有用,好比CSS技巧演示。

另一個神奇的東東：在瀏覽器地址欄輸入data:text/html, <html contenteditable> ，便可打開一個簡單的在線編輯器。

source：one line browser notepad

也可用html5建立幻燈片，而後在演示時在瀏覽器中實時編輯，很是酷。

6、desginMode

用來指定整個頁面是否可編輯，有兩個值，on和off。該屬性只能用javascript來修改值。若是design設置爲on，則全部容許設置contenteditable的元素均可編輯。

用法：

window.document.designmode="off";

designmode爲on時，整個頁面都是可編輯的。全局均可修改不是很實用，仍是contenteditable這種對局部的修改比較實用。

7、accesskey

accesskey屬性容許設置一個或者多個鍵盤快捷鍵，實現快速選取頁面元素。

舉例：

<form>
　　用戶名： <input type="text" name="name" accesskey="n"/>
　　<p/>
　　密碼： <input type="password" name="password" accesskey="p"/>
　　<p/>
　　<input type="submit" value="登陸" accesskey="s"/>
</form>