溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下HTML5的classList怎么應(yīng)用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
Element.classList
這個(gè)屬性已經(jīng)發(fā)布了好幾年，通過(guò)classList，我們可以通過(guò)JavaScript來(lái)操縱折疊css的類(lèi)屬性。
代碼如下：
復(fù)制代碼
代碼如下：
// //使用classList屬性（Dom元素，css類(lèi)名）
function toggleClassList（element，cName）{
// 1. classList API
//切換類(lèi)，有則可刪除，沒(méi)有則添加
if（element.classList.toggle）{
元素.classList.toggle（cName）;
返回true；
}
// !!! 其實(shí)，本函數(shù)toggleClassList如果支持的話，
//那么下面的代碼就不會(huì)被執(zhí)行，此處唯一作演示，請(qǐng)靈活應(yīng)用
// 2. classList API
//元素的類(lèi)屬性是否包含隱藏這個(gè)CSS類(lèi)
var hasHide = element.classList.contains（cName）;
// //
if（hasHide）{
// 3. classList API
//可移除隱藏類(lèi)
element.classList.remove（cName）;
} else {
// 4. classList API
//添加隱藏類(lèi)
element.classList.add（cName）;
}
返回true;
};
文本菜單API
經(jīng)測(cè)試chrome28不管用......
新的API，文本菜單是極好的接口：此接口允許你很簡(jiǎn)單地添加菜單項(xiàng)到瀏覽器的上下文菜單（右鍵菜單），而不是去覆蓋瀏覽器的默認(rèn)右鍵菜單。
需要注意的是，你最好采用js腳本來(lái)動(dòng)態(tài)的創(chuàng)建上下文菜單，這樣可以避免頁(yè)面替換JS腳本的情況下出現(xiàn)多余的HTML代碼。
代碼如下：
復(fù)制代碼
代碼如下：
<DIV CLASS = “隱藏”>
<！ -文本菜單指定了使用哪個(gè)上下文菜單- >
<！ - ！不知道為什么，我的瀏覽器上這個(gè)配置不起作用- >
<節(jié)contextmenu =“ mymenu” style =“ min-height：100px; min-height：200px; background：＃999;”>
<h2>點(diǎn)擊此區(qū)域查看菜單</ h2>
<！-
為了代碼結(jié)構(gòu)的清晰，把menu元素放到了要使用的元素內(nèi)部，實(shí)際上你也可以放到外部的任何地方：
->
<！-添加菜單，至于圖片圖標(biāo)，請(qǐng)自己設(shè)置。添加菜單->
<menu type =“ context“ id =” mymenu“>
<menuitem label =”刷新頁(yè)面“ onclick =” window.location.reload（）;“ icon =“ https://cache.yisu.com/upload/information/20220117/488/20024.jpg”> </ menuitem>
<menu label =“分享到...” icon =“ http：// www.sinaimg.cn/blog/developer/wiki/32x32.png“>
<menuitem label =“新浪微博” icon =“ https://cache.yisu.com/upload/information/20220117/488/20025.jpg” onclick =“ window.location.href ='http：//www.weibo。 com'“> </ menuitem>
<menuitem label =”騰訊微博“ icon =” https://cache.yisu.com/upload/information/20220117/488/20024.jpg“ onclick =” window.location .href ='http：//t.qq.com'“> </ menuitem> </ menuitem>
</ menu>
</ menu>
</ section>
</ div>
Element.dataset
數(shù)據(jù)集（數(shù)據(jù)集）API允許開(kāi)發(fā)者對(duì)DOM元素設(shè)置（集）和獲?。ǐ@取）以data-開(kāi)頭開(kāi)頭的屬性值。
代碼如下：
復(fù)制代碼
代碼如下：
<div id =“ intro” data-website =“ www.csdn.net” data-id =“ 551996458” data-my-name =“鐵錨” data-blog-url =“ http：//blog.csdn。 net / renfufei“> </ div>
復(fù)制代碼
代碼如下：
函數(shù)testDataset（）{
//
var intro = document.getElementById（“ intro”）;
//注意這個(gè)不是id屬性哦，是data-id的值
var id = intro.dataset.id;
//數(shù)據(jù)網(wǎng)站
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
+“，網(wǎng)站：” +網(wǎng)站
+“，blogUrl：” + blogUrl
+“，myName：” + myName
;
//
warn（msg）;
};
沒(méi)有什么好說(shuō)的，和班級(jí)列表一樣，簡(jiǎn)單卻實(shí)用。（想一想，是否改變了后臺(tái)和前臺(tái)JS的某些交互以及解耦？）
window.postMessage API
IE8已經(jīng)支持的postMessage API好幾年了，此API允許window和iframe元素之間互相傳遞消息。
跨域支持哦。代碼如下：
復(fù)制代碼
代碼如下：
//從域1上的窗口或框架發(fā)送消息到承載另一個(gè)域的iframe
var iframeWindow = document.getElementById（“ iframe”）。contentWindow;
iframeWindow.postMessage（“您好，第一個(gè)窗口！”）;
//從不同主機(jī)上的iframe內(nèi)部，接收消息
window.addEventListener（“ message”，function（event）{
//確保我們信任發(fā)送域
if（event.origin ==“ http://davidwalsh.name” ）{
//注銷(xiāo)消息
console.log（event.data）;
//發(fā)回一條消息
event.source.postMessage（“ Hello back！”）;
}
]）;
//消息只允許字符串類(lèi)型的數(shù)據(jù)，而您可以使用JSON.stringify以及JSON.parse傳遞更多累積的消息。
autofocus屬性
autofocus屬性確保當(dāng)頁(yè)面加載后，給定的BUTTON，INPUT或者TEXTAREA元素能夠自動(dòng)獲得焦點(diǎn)。
復(fù)制代碼
代碼如下：
<input autofocus =“ autofocus” />
<button autofocus =“ autofocus”>嗨！</ button>
<textarea autofocus =“ autofocus”> </ textarea>
autofocus屬性主要用在簡(jiǎn)單的輸入頁(yè)面，詳情請(qǐng)參考：autofocus屬性
各瀏覽器廠商對(duì)這些API的支持度各不相同，所以在使用之前最好檢測(cè)一下兼容性，花一些時(shí)間來(lái)閱讀上面所列出的的API，您將會(huì)對(duì)他們了解和掌握更多。
部分的測(cè)試代碼如下：
復(fù)制代碼
代碼如下：
<！DOCTYPE html>
<html>
<head>
<title> 5個(gè)你不知道的HTML5 API接口演示</ title>
<meta name =“ Generator” content =“ EditPlus”>
<meta name =“ Author” content = “ renfufei@qq.com”>
<元名稱(chēng)=“描述” content =“ original = http：//davidwalsh.name/html5-apis”>
<style>
.hide {display：none}
.poplayer {z-index： 999; 位置：絕對(duì)；背景顏色：#fff; top：0px; left：0px;溢出：隱藏；寬度：100％；高度：100％；不透明度：1;}
.close {頂部：3px; right：10px; position：absolute;}
</ style>
<script>
//顯示
警告信息功能warn（msg）{
warn = warn || “一個(gè)未知警告！”;
如果（窗口
控制臺(tái)）{ console.warn（msg）;
}其他{
alert（msg）;
}
};
// //使用classList屬性（Dom元素，css類(lèi)名）
function toggleClassList（element，cName）{
// 1. classList API
//切換類(lèi)，有則可刪除，沒(méi)有則添加
if（element.classList.toggle）{
元素.classList.toggle（cName）;
返回true；
}
// !!! 其實(shí)，本函數(shù)toggleClassList如果支持的話，
//那么下面的代碼就不會(huì)被執(zhí)行，此處唯一作演示，請(qǐng)靈活應(yīng)用
// 2. classList API
//元素的類(lèi)屬性是否包含隱藏這個(gè)CSS類(lèi)
var hasHide = element.classList.contains（cName）;
// //
if（hasHide）{
// 3. classList API
//可移除隱藏類(lèi)
element.classList.remove（cName）;
} else {
// 4. classList API
//添加隱藏類(lèi)
element.classList.add（cName）;
}
返回true;
};
//使用className屬性（Dom元素，css類(lèi)名）
function toggleClassName（element，cName）{
var className = element.className || “”;
//
去掉首尾的空白cName = cName.replace（/ ^ / s * | / s * $ / g，“”）;
// cName中間如果包含空白字符，則失敗。如果要好好處理，可以分割為層疊，分開(kāi)處理
var blankReg = // s + /;
if（blankReg.test（cName））{
warn（“'” + cName +“'中間包含空白字符”）;
返回false；
}
//正則，/ b表示可見(jiàn)連續(xù)字符的邊界，可以很理解：
//“ hide2 hide hide myname”那么，
// hide2的前后各有一個(gè)虛擬的/ b，hide前后也有，
//但是hi和。德之間則沒(méi)有
//克表示單行全局
//變種代表= //拜德/ b / g的;
var rep = new RegExp（“ // b” + cName +“ // b”，“ g”）;
如果（代表
} else {
className + =“” + cName;
}
//替換新的className。element.className
= className;
返回true；
};
//函數(shù)，切換（元素id，className）
函數(shù)toggleClass（elementId，cName）{
//獲取一個(gè)DOM元素
var element = document.getElementById（elementId）;
//如果不存在元素
if（！element）{
warn（“ id為” + elementId +“的元素不存在”）;
返回false；
}
if（！element.classList）{
warn（“ id為” + elementId +“的元素不支持classList屬性，將使用其他手段來(lái)實(shí)現(xiàn)”）；
返回toggleClassName（element，cName）;
} else {
return toggleClassList（element，cName）;
}
};
函數(shù)testDataset（）{
//
var intro = document.getElementById（“ intro”）;
//注意這個(gè)不是id屬性哦，是data-id的值
var id = intro.dataset.id;
//數(shù)據(jù)網(wǎng)站
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
+“，網(wǎng)站：” +網(wǎng)站
+“，blogUrl：” + blogUrl
+“，myName：” + myName
;
//
warn（msg）;
};
// dom加載后執(zhí)行
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（）;
}， 錯(cuò)誤的）;
</ script>
</ head>
<body>
<div>
<div id =“ diary2” class =“ diary poplayer hide”>
<a href =“ javascript：void（0）” _fcksavedurl =“” javascript：void（0 ）“” id =“ close”>關(guān)閉</a>
<div id =“ loading” class =“ loading hide” style =“ z-index：1;位置：絕對(duì)；左側(cè)：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”>打開(kāi)</a>
</ div>
</ div>
<div class =“ hide”>
<！-contextmenu指定了使用其中某個(gè)菜單。->
<！-!!!不知道為什么，我的瀏覽器上這個(gè)配置不起作用。->
<section contextmenu =“ mymenu” style =“ min-height：100px; min-height：200px; background：＃ 999;“>
<h2>點(diǎn)擊此區(qū)域查看菜單</ h2>
<！-
為了使代碼結(jié)構(gòu)清晰，把菜單元素放到了要使用的元素內(nèi)部，實(shí)際上你也可以放到外部的任何地方：
- >
<！-添加菜單，至于圖片圖標(biāo)，請(qǐng)自己設(shè)置。->
<menu type =“ context” id =“ mymenu”>
<menuitem label =“刷新頁(yè)面” onclick =“ window.location。 reload（）;” icon =“ https://cache.yisu.com/upload/information/20220117/488/20024.jpg”> </ menuitem>
<menu label =“分享到...” icon =“ http：// www.sinaimg.cn/blog/developer/wiki/32x32.png“>
<menuitem label =”新浪微博“ icon =” http：//www.sinaimg。
<menuitem label =“騰訊微博” icon =“ https://cache.yisu.com/upload/information/20220117/488/20024.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怎么應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
