今天小编给大家分享一下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代码。
代码如下：
复制代码
代码如下：
<DIV CLASS = “隐藏”>
<！ -文本菜单指定了使用哪个上下文菜单- >
<！ - ！不知道为什么，我的浏览器上这个配置不起作用- >
<节contextmenu =“ mymenu” style =“ min-height：100px; min-height：200px; background：＃999;”>
<h2>点击此区域查看菜单</ h2>
<！-
为了代码结构的清晰，把menu元素放到了要使用的元素内部，实际上你也可以放到外部的任何地方：
->
<！-添加菜单，至于图片图标，请自己设置。添加菜单->
<menu type =“ context“ id =” mymenu“>
<menuitem label =”刷新页面“ onclick =” window.location.reload（）;“ icon =“ /file/upload/202210/19/fl5vou5bfqs.jpg”> </ menuitem>
<menu label =“分享到...” icon =“ http：// www.sinaimg.cn/blog/developer/wiki/32x32.png“>
<menuitem label =“新浪微博” icon =“ /file/upload/202210/19/okpxhoyydmx.jpg” onclick =“ window.location.href ='http：//www.weibo。 com'“> </ menuitem>
<menuitem label =”腾讯微博“ icon =” /file/upload/202210/19/fl5vou5bfqs.jpg“ onclick =” window.location .href ='http：//t.qq.com'“> </ menuitem> </ menuitem>
</ menu>
</ menu>
</ section>
</ div>
Element.dataset
数据集（数据集）API允许开发者对DOM元素设置（集）和获取（获取）以data-开头开头的属性值。
代码如下：
复制代码
代码如下：
<div id =“ intro” data-website =“ www.csdn.net” data-id =“ 551996458” data-my-name =“铁锚” data-blog-url =“ http：//blog.csdn。 net / renfufei“> </ div>
复制代码
代码如下：
函数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元素能够自动获得焦点。
复制代码
代码如下：
<input autofocus =“ autofocus” />
<button autofocus =“ autofocus”>嗨！</ button>
<textarea autofocus =“ autofocus”> </ textarea>
autofocus属性主要用在简单的输入页面，详情请参考：autofocus属性
各浏览器厂商对这些API的支持度各不相同，所以在使用之前最好检测一下兼容性，花一些时间来阅读上面所列出的的API，您将会对他们了解和掌握更多。
部分的测试代码如下：
复制代码
代码如下：
<！DOCTYPE html>
<html>
<head>
<title> 5个你不知道的HTML5 API接口演示</ title>
<meta name =“ Generator” content =“ EditPlus”>
<meta name =“ Author” content = “ renfufei@qq.com”>
<元名称=“描述” content =“ original = http：//davidwalsh.name/html5-apis”>
<style>
.hide {display：none}
.poplayer {z-index： 999; 位置：绝对；背景颜色：#fff; top：0px; left：0px;溢出：隐藏；宽度：100％；高度：100％；不透明度：1;}
.close {顶部：3px; right：10px; position：absolute;}
</ style>
<script>
//显示
警告信息功能warn（msg）{
warn = warn || “一个未知警告！”;
如果（窗口
控制台）{ console.warn（msg）;
}其他{
alert（msg）;
}
};
// //使用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;
};
//使用className属性（Dom元素，css类名）
function toggleClassName（element，cName）{
var className = element.className || “”;
//
去掉首尾的空白cName = cName.replace（/ ^ / s * | / s * $ / g，“”）;
// cName中间如果包含空白字符，则失败。如果要好好处理，可以分割为层叠，分开处理
var blankReg = // s + /;
if（blankReg.test（cName））{
warn（“'” + cName +“'中间包含空白字符”）;
返回false；
}
//正则，/ b表示可见连续字符的边界，可以很理解：
//“ hide2 hide hide myname”那么，
// hide2的前后各有一个虚拟的/ b，hide前后也有，
//但是hi和。德之间则没有
//克表示单行全局
//变种代表= //拜德/ b / g的;
var rep = new RegExp（“ // b” + cName +“ // b”，“ g”）;
如果（代表
} else {
className + =“” + cName;
}
//替换新的className。element.className
= className;
返回true；
};
//函数，切换（元素id，className）
函数toggleClass（elementId，cName）{
//获取一个DOM元素
var element = document.getElementById（elementId）;
//如果不存在元素
if（！element）{
warn（“ id为” + elementId +“的元素不存在”）;
返回false；
}
if（！element.classList）{
warn（“ id为” + elementId +“的元素不支持classList属性，将使用其他手段来实现”）；
返回toggleClassName（element，cName）;
} else {
return toggleClassList（element，cName）;
}
};
函数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）;
};
// dom加载后执行
window.addEventListener（“ DOMContentLoaded”，function（）{
var open = document.getElementById（“ open”）;
var close = document.getElementById（“ close”）;
open.addEventListener（“ click”，function（）{
//
toggleClass（“ diary2”，“ hide”）;
toggleClass（“ loading”，“ hide”）;
}）;
close.addEventListener（“ click”，function（）{
//
toggleClass（“ diary2”，“ hide”）;
toggleClass（“ loading”，“ hide”）;
}）;
//
testDataset（）;
}， 错误的）;
</ script>
</ head>
<body>
<div>
<div id =“ diary2” class =“ diary poplayer hide”>
<a href =“ javascript：void（0）” _fcksavedurl =“” javascript：void（0 ）“” id =“ close”>关闭</a>
<div id =“ loading” class =“ loading hide” style =“ z-index：1;位置：绝对；左侧：40％；顶部：30％；宽度：104px；高度：104px;不透明度：0.5;背景： ＃000000; border：0px solid＃000000; border-radius：10px; -webkit-border-radius：10px;“>
<img src =” http://mat1.gtimg.com/app/opent/images/wiki/ resource / weiboicon32.png“ alt =”“
style =” position：absolute; left：26px; top：10px; width：50px; height：50px; border-radius：10px; -webkit-border-radius：10px;“>
<div class =“ loadingtext” style =“ position：absolute; left：12px; top：76px; color：#ffffff;”>正在加载中</ div>
</ div>
</ div>
< / div> <div>
<a href =“ javascript：void（0）” id =“ open”>打开</a>
</ div>
</ div>
<div class =“ hide”>
<！-contextmenu指定了使用其中某个菜单。->
<！-!!!不知道为什么，我的浏览器上这个配置不起作用。->
<section contextmenu =“ mymenu” style =“ min-height：100px; min-height：200px; background：＃ 999;“>
<h2>点击此区域查看菜单</ h2>
<！-
为了使代码结构清晰，把菜单元素放到了要使用的元素内部，实际上你也可以放到外部的任何地方：
- >
<！-添加菜单，至于图片图标，请自己设置。->
<menu type =“ context” id =“ mymenu”>
<menuitem label =“刷新页面” onclick =“ window.location。 reload（）;” icon =“ /file/upload/202210/19/fl5vou5bfqs.jpg”> </ menuitem>
<menu label =“分享到...” icon =“ http：// www.sinaimg.cn/blog/developer/wiki/32x32.png“>
<menuitem label =”新浪微博“ icon =” http：//www.sinaimg。
<menuitem label =“腾讯微博” icon =“ /file/upload/202210/19/fl5vou5bfqs.jpg” onclick =“ window.location.href ='http：// t.qq.com'“> </ menuitem> </ menuitem>
</ menu>
</ menu>
</ section>
</ div>
<div id =” intro“ data-website =” www.csdn.net“ data-id =“ 551996458” data-my-name =“铁锚” data-blog-url =“ http://blog.csdn.net/renfufei”> </ div>
</ body>
</ html>
以上就是“HTML5的classList怎么应用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
