全局属性《HTML5系列教程5》

在HTML5中，新增了一个“全局属性”的概念，我们知道，属性的作用域是元素，全局属性的作用域就是所有元素。在本文中我们就来了解几种我们经常会使用到的全局属性。

1.contentEditable属性

该属性的主要功能是允许用户编辑元素中的内容。他说一个布尔值，可以是TRUE或FALSE。当值为TRUE时，在元素焦点上单击鼠标，可以获得鼠标焦点，并插入一个符号，提示用户该元素的内如允许编辑，反之则不提示。

还有，该元素还有一个隐藏的inherit状态，该状态也是一个布尔值。当值为TRUE时允许编辑，当值为FALSE时不能编辑。如果不指定值，则由该元素继承的父级元素来决定，父级元素允许编辑则该元素也允许编辑，如父级元素不能编辑，则该元素也不能编辑。

允许编辑段落元素的内容的代码如下，效果如图所示

2.designMode属性

该属性用于指定整个页面是否可以编辑，当页面可编辑时，页面中任何支持contenteditable的元素都变成可编辑状态。该属性只能在JavaScript脚本中进行编辑修改。该属性并非布尔值，而是“on”和“off”。当值为“on”时，页面可以进行编辑；当值为“off”时，页面不可编辑。

页面中有以下框架代码：

＜iframe id="editor"＞＜/iframe＞

在JavaScript脚本指定designmode属性的方法如下：

editor.document.designmode="on"

3.hidden属性

在HTML5中，该属性用于隐藏或显示元素。hidden属性的值是一个布尔值，当设置为TRUE时，元素不可见；当值为FALSE时，元素可见。需要提醒的是，不可见的元素并不是不存在，只是浏览器并未渲染该元素，如果在页面加载后，使用JavaScript脚本对该属性的值进行更改，则元素变为可见状态。就像下面的代码演示效果一样。

4.spellcheck属性

在HTML5中，spellcheck属性针对input元素（type=text）和textarea这两个文本输入框提供拼写检查。该属性的值是一个布尔值，为TRUE时执行拼写检查，为FALSE时不执行拼写检查

input和textarea元素指定spellcheck属性的代码如下：

＜input type="text" spellcheck="false" /＞

＜textarea spellcheck="true"＞＜/textarea＞

代码和效果如下图所示：

这里有个问题要注意一下，如果一个元素的readonly属性或disable属性为TRUE，则不执行拼写检查。

5.tabindex属性

一个页面中会有很多个控件，当敲击TAB键时，焦点会在各个控件之间切换，tabindex用于表示该控件是第几个被访问的控件。如果设置一个控件的tabindex值为负数，那么通过按下tab键时改控件就不能获得焦点，但是仍然可以通过编程的方式让控件获得焦点，这在复杂的页面或web编程中是非常有用的。tab按从小到大的顺序进行导航，值为0的控件会被最后导航到。使用tab键对多个文本框进行导航的代码如下：

好了，关于全局属性的种类就介绍到这里了。想了解更多网页设计教程？添加我们的官方微信公众号并关注我们吧！微信号：pyyuanxing