扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >HTML5的classList怎么应用
  • 419

0
分享到

HTML5的classList怎么应用

2024-04-02 19:04:59 419人浏览 独家记忆
摘要

今天小编给大家分享一下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代码。

代码如下：

复制代码

代码如下：

<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/imgs/upload/202210/19/fl5vou5bfqs.jpg”> </ menuitem>

<menu label =“分享到...” icon =“ Http：// www.sinaimg.cn/blog/developer/wiki/32x32.png“>

<menuitem label =“新浪微博” icon =“ /file/imgs/upload/202210/19/okpxhoyydmx.jpg” onclick =“ window.location.href ='http：//www.weibo。 com'“> </ menuitem>

<menuitem label =”腾讯微博“ icon =” /file/imgs/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/imgs/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/imgs/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怎么应用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网node.js频道。

--结束END--

本文标题: HTML5的classList怎么应用

本文链接: https://lsjlt.com/news/92578.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML5的classList怎么应用
    今天小编给大家分享一下HTML5的classList怎么应用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一...
    99+
    2024-04-02
  • 怎么使用HTML5里的classList操作CSS类
    这篇文章主要讲解了“怎么使用HTML5里的classList操作CSS类”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用HTML5里的classLis...
    99+
    2024-04-02
  • 如何使用HTML5的classList属性操作CSS类
    这篇“如何使用HTML5的classList属性操作CSS类”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“如何使用HTML5的classList属性操作CSS类”，小编整理了以下知识点，请大家...
    99+
    2023-06-09
  • HTML5的Notifycations怎么应用
    今天小编给大家分享一下HTML5的Notifycations怎么应用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下...
    99+
    2024-04-02
  • css中classlist的作用是什么
    这篇文章给大家介绍css中classlist的作用是什么，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。 classList属性返回元素的类名，作为DOMTo...
    99+
    2024-04-02
  • HTML5的Web Storage怎么应用
    本文小编为大家详细介绍“HTML5的Web Storage怎么应用”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML5的Web Storage怎么应用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • HTML5的video事件怎么应用
    这篇文章主要介绍“HTML5的video事件怎么应用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML5的video事件怎么应用”文章能帮助大家解决问题。 使...
    99+
    2024-04-02
  • HTML5的SVG元素怎么应用
    本篇内容介绍了“HTML5的SVG元素怎么应用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 组合-g元...
    99+
    2024-04-02
  • HTML5怎么打开本地app应用
    本篇内容介绍了“HTML5怎么打开本地app应用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！首先为了保证...
    99+
    2024-04-02
  • classList用于添加和删除CSS类的API
    该classListAPI提供了原生的方式来添加，删除，切换，或检查CSS类存在的元素。它比解析容易得多element.className：1...
    99+
    2023-06-03
  • 怎么用HTML5实现拍照上传应用
    这篇文章给大家分享的是有关怎么用HTML5实现拍照上传应用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面...
    99+
    2024-04-02
  • 怎么实现HTML5离线应用开发
    这篇文章主要介绍“怎么实现HTML5离线应用开发”，在日常操作中，相信很多人在怎么实现HTML5离线应用开发问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么实现HTML5离...
    99+
    2024-04-02
  • HTML5怎么实现应用程序缓存
    这篇文章主要介绍HTML5怎么实现应用程序缓存，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！为什么要使用Application Cache技术？在HTML5之前，我们需要接入网络才能访问，这毫无疑问是网站多次请求服务...
    99+
    2023-06-09
  • Html5中hashchange、pageshow和pagehide事件怎么应用
    本篇内容主要讲解“Html5中hashchange、pageshow和pagehide事件怎么应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Html5中ha...
    99+
    2024-04-02
  • HTML5中的localStorage怎么用
    这篇文章主要介绍“HTML5中的localStorage怎么用”，在日常操作中，相信很多人在HTML5中的localStorage怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
  • HTML5的FileWriter API怎么用
    本文小编为大家详细介绍“HTML5的FileWriter API怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML5的FileWriter API怎么用”文章能帮助大家解决疑惑，下面跟着小编的思...
    99+
    2024-04-02
  • HTML5的Canvas API怎么用
    这篇文章主要介绍“HTML5的Canvas API怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML5的Canvas API怎么用”文章能帮助大家解决问题...
    99+
    2024-04-02
  • HTML5的Pixi.js怎么使用
    这篇文章主要介绍了HTML5的Pixi.js怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5的Pixi.js怎么使用文章都会有所收获，下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • html5的datalist怎么使用
    本篇内容主要讲解“html5的datalist怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5的datalist怎么使用”吧!html5的dat...
    99+
    2024-04-02
  • 怎么在Html5中实现应用程序缓存
    这篇文章给大家介绍怎么在Html5中实现应用程序缓存，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。一、作用离线浏览 - 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联网会直接使用缓存在本地的文件。优化加载速度，...
    99+
    2023-06-09
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作