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>

8、draggable和dropzone

这两个属性放在一块儿使用，由于它们是新的拖放API（DnD API）的一部分。draggable表示是否容许用户拖动元素；dropzone规定元素被拖放到哪一个区域。

draggable属性有3个值：true表示元素可拖动；false表示元素不可拖动；auto表示使用用户代理默认行为。

dropzone属性有3个值：copy表示建立被拖动元素的一个副本；move实际将元素移动到新位置；link建立被拖动的数据的连接。

没有过多研究很少介绍了。

了解更多和想看demo可参考：HTML5 drag & drop 拖拽与拖放简介

资源连接：

理解HTML5语义 – 第2部分：文档结构和全局属性

本文做者starof,因知识自己在变化，做者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4593741.html有问题欢迎与我讨论，共同进步。