HTML5的classList怎么应用

发布时间：2022-03-09 14:49:57 来源：亿速云阅读：137 作者：iii 栏目：web开发

今天小编给大家分享一下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;”>

<h2>点击此区域查看菜单</ h2>

<！-

为了代码结构的清晰，把menu元素放到了要使用的元素内部，实际上你也可以放到外部的任何地方：

<！-添加菜单，至于图片图标，请自己设置。添加菜单->

</ menu>

</ section>

</ div>

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元素能够自动获得焦点。

复制代码

代码如下：

autofocus属性主要用在简单的输入页面，详情请参考：autofocus属性

各浏览器厂商对这些API的支持度各不相同，所以在使用之前最好检测一下兼容性，花一些时间来阅读上面所列出的的API，您将会对他们了解和掌握更多。

部分的测试代码如下：

复制代码

代码如下：

<！DOCTYPE html>

<html>

<head>

<title> 5个你不知道的HTML5 API接口演示</ title>

<元名称=“描述” 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>

//显示

警告信息功能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>

<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>

<！-contextmenu指定了使用其中某个菜单。->

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

<h2>点击此区域查看菜单</ h2>

<！-

为了使代码结构清晰，把菜单元素放到了要使用的元素内部，实际上你也可以放到外部的任何地方：

- >

<！-添加菜单，至于图片图标，请自己设置。->

<menuitem label =”新浪微博“ icon =” http：//www.sinaimg。

</ menu>

</ section>

</ div>

</ body>

</ html>

以上就是“HTML5的classList怎么应用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。

向AI问一下细节

HTML5的classList怎么应用

猜你喜欢

最新资讯

相关推荐

相关标签