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問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

HTML5的classList怎么應用

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

HTML5的classList怎么應用

猜你喜歡

最新資訊

相關推薦

相關標簽