html5特性检测,HTML5 简介（七）：在线检测、contenteditable、classList 等特性介绍

除了前五篇介绍的之外，HTML5 还有一些比较实用的新特性，今天把它们汇总起来介绍一下。

hidden 属性

HTML 5 添加了一个hidden属性，所有元素都可以有，效果就是把当前元素隐藏起来。功能比较小，但是就不用为它搞 CSS 了。

If your browser support this feature you will not see me.

需要注意的是，不存在hidden="false"的写法。如果这样写，会被等效为上面代码中的情况，同样会被隐藏。JavaScript 操作该属性的方法如下：

element.hidden = true; // Enable

element.hidden = false; // Disable

classList API

新增的classList API使得给元素添加、删除一个类更简单了。基本的用法如下：

element.classList.add("class-to-add");

element.classList.remove("class-to-terminate");

element.classList.toggle("class-to-toggle");

// 下面这个方法用来检测是不是存在一个 class

element.classList.contains("class-to-check");

// 可以返回有几个类

element.classList.length;

如果你用过 jQuery，那么就会发现这个 API 和 jQuery 提供的addClass等函数比起来，有两个不足：不能首尾相连地使用、不能一次操纵多个类。

Content Editable 属性

又一个所有元素都能用的属性。添加之后，用户就可以更改其中的内容了。代码：

Hello, feel free to edit me!

And mee!

JavaScript 操作方法：

element.contentEditable = true; // Enable

element.contentEditable = false; // Disable

效果：

Hello, feel free to edit me!And mee!

特别说明的是，通过一些额外的 JavaScript 代码，利用这个属性，可以把它搞成一个编辑器类似物。但是比较麻烦，也超过了今天文章的范围，就不罗嗦了。

在线/离线检测

这是一个小巧、在某些情况下实用的功能。可以用表达式navigator.onLine来检测现在用户是否联网。

同时，提供了事件监听器：

// 你可以把事件注册到 window, document 或者 document.body

window.addEventListener('online', function() {

document.getElementById("status").innerHTML="Online";

});

window.addEventListener('offline', function() {

document.getElementById("status").innerHTML="Offline";

});