HTML5的classList怎么应用

今天小编给大家分享一下HTML5的classList怎么应用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的碾子山网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

Element.classList

这个属性已经发布了好几年，通过classList，我们可以通过JavaScript来操纵折叠css的类属性。

代码如下：

复制代码

代码如下：

// //使用classList属性（Dom元素，css类名）

function toggleClassList（element，cName）{

// 1. classList API

//切换类，有则可删除，没有则添加

if（element.classList.toggle）{

元素.classList.toggle（cName）;

返回true；

}

// !!! 其实，本函数toggleClassList如果支持的话，

//那么下面的代码就不会被执行，此处唯一作演示，请灵活应用

// 2. classList API

//元素的类属性是否包含隐藏这个CSS类

var hasHide = element.classList.contains（cName）;

// //

if（hasHide）{

// 3. classList API

//可移除隐藏类

element.classList.remove（cName）;

} else {

// 4. classList API

//添加隐藏类

element.classList.add（cName）;

}

返回true;

};

文本菜单API

经测试chrome28不管用......

新的API，文本菜单是极好的接口：此接口允许你很简单地添加菜单项到浏览器的上下文菜单（右键菜单），而不是去覆盖浏览器的默认右键菜单。

需要注意的是，你最好采用js脚本来动态的创建上下文菜单，这样可以避免页面替换JS脚本的情况下出现多余的HTML代码。

代码如下：

复制代码

代码如下：

<！ -文本菜单指定了使用哪个上下文菜单- >

<！ - ！不知道为什么，我的浏览器上这个配置不起作用- >

<节contextmenu =“ mymenu” style =“ min-height：100px; min-height：200px; background：＃999;”>

点击此区域查看菜单
<！-
为了代码结构的清晰，把menu元素放到了要使用的元素内部，实际上你也可以放到外部的任何地方：
->
<！-添加菜单，至于图片图标，请自己设置。添加菜单->

Element.dataset
数据集（数据集）API允许开发者对DOM元素设置（集）和获取（获取）以data-开头开头的属性值。
代码如下：
复制代码
代码如下：

复制代码
代码如下：
函数testDataset（）{
//
var intro = document.getElementById（“ intro”）;
//注意这个不是id属性哦，是data-id的值
var id = intro.dataset.id;
//数据网站
var website = intro.dataset.website;
// data-blog-url，驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg =“ qq：” + id
+“，网站：” +网站
+“，blogUrl：” + blogUrl
+“，myName：” + myName
;
//
warn（msg）;
};
没有什么好说的，和班级列表一样，简单却实用。（想一想，是否改变了后台和前台JS的某些交互以及解耦？）
window.postMessage API
IE8已经支持的postMessage API好几年了，此API允许window和iframe元素之间互相传递消息。
跨域支持哦。代码如下：
复制代码
代码如下：
//从域1上的窗口或框架发送消息到承载另一个域的iframe
var iframeWindow = document.getElementById（“ iframe”）。contentWindow;
iframeWindow.postMessage（“您好，第一个窗口！”）;
//从不同主机上的iframe内部，接收消息
window.addEventListener（“ message”，function（event）{
//确保我们信任发送域
if（event.origin ==“ http://davidwalsh.name” ）{
//注销消息
console.log（event.data）;
//发回一条消息
event.source.postMessage（“ Hello back！”）;
}
]）;
//消息只允许字符串类型的数据，而您可以使用JSON.stringify以及JSON.parse传递更多累积的消息。
autofocus属性
autofocus属性确保当页面加载后，给定的BUTTON，INPUT或者TEXTAREA元素能够自动获得焦点。
复制代码
代码如下：