Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the application of HTML5's classList. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Element.classList

This property has been released for several years, and with classList, we can manipulate the class properties of collapsed css through JavaScript.

The code is as follows:

Copy the code

The code is as follows:

/ use the classList attribute (Dom element, css class name)

Function toggleClassList (element,cName) {

/ / 1. ClassList API

/ / switch classes, delete them if you have them, add them if you don't

If (element.classList.toggle) {

Element .classList.toggle (cName)

Return to true

}

/ /! In fact, if this function toggleClassList is supported

/ / then the following code will not be executed. It is only demonstrated here. Please apply it flexibly.

/ / 2. ClassList API

/ / whether the class attribute of the element contains the hidden CSS class

Var hasHide = element.classList.contains (cName)

/

If (hasHide) {

/ / 3. ClassList API

/ / removable hidden class

Element.classList.remove (cName)

} else {

/ / 4. ClassList API

/ / add a hidden class

Element.classList.add (cName)

}

Return to true

}

Text menu API

It has been tested that chrome28 does not work.

With the new API, the text menu is an excellent interface: this interface allows you to easily add menu items to the browser's context menu (right-click menu), rather than overriding the browser's default right-click menu.

It is important to note that it is best to use the js script to create context menus dynamically, so as to avoid redundant HTML code when the page replaces JS scripts.

The code is as follows:

Copy the code

The code is as follows:

Click this area to view the menu

Element.dataset

Dataset (dataset) API allows developers to set (set) and get (get) attribute values that start with data- on DOM elements.

The code is as follows:

Copy the code

The code is as follows:

Copy the code

The code is as follows:

Function testDataset () {

/ /

Var intro = document.getElementById ("intro")

/ / Note this is not the id attribute, but the value of data-id.

Var id = intro.dataset.id

/ / data website

Var website = intro.dataset.website

/ / data-blog-url, hump nomenclature..

Var blogUrl = intro.dataset.blogUrl

/ / data-my-name

Var myName = intro.dataset.myName

/ /

Var msg = "qq:" + id

+ ", website:" + website

", blogUrl:" + blogUrl

", myName:" + myName

/ /

Warn (msg)

}

There is nothing to say. Like the class list, it is simple but practical. (think about it, has some interaction and decoupling between background and foreground JS changed? )

Window.postMessage API

IE8 has supported postMessage API for several years, and this API allows window and iframe elements to pass messages to and from each other.

Cross-domain support. The code is as follows:

Copy the code

The code is as follows:

/ / send a message from a window or frame on domain 1 to the iframe that hosts another domain

Var iframeWindow = document.getElementById ("iframe"). ContentWindow

IframeWindow.postMessage ("Hello, first window!" )

/ / receive messages from within iframe on different hosts

Window.addEventListener ("message", function (event) {

/ / make sure we trust the sending domain

If (event.origin = = "http://davidwalsh.name") {

/ / Logout message

Console.log (event.data)

/ / send back a message

Event.source.postMessage ("Hello back!" )

}

])

/ / messages only allow data of type string, and you can use JSON.stringify and JSON.parse to pass more cumulative messages.

Autofocus attribute

The autofocus attribute ensures that a given BUTTON,INPUT or TEXTAREA element automatically gets focus when the page is loaded.

Copy the code

The code is as follows:

Hi!

Autofocus attribute is mainly used in simple input page. For more information, please see: autofocus attribute.

Browser vendors have different levels of support for these API, so it's best to check compatibility before using them, take some time to read the API listed above, and you'll know more about them.

The partial test code is as follows:

Copy the code

The code is as follows:

5 demonstrations of HTML5 API interfaces that you don't know

.hide {display:none}

.poplayer {z-index: 999; location: absolute; background color: # fff; top:0px; left:0px; overflow: hidden; width: 100%; height: 100%; opacity: 1;}

.close {Top: 3px; right:10px; position:absolute;}

/ / display

Warning message function warn (msg) {

Warn = warn | | "an unknown warning!"

If (window

Console) {console.warn (msg)

} other {

Alert (msg)

}

}

/ use the classList attribute (Dom element, css class name)

Function toggleClassList (element,cName) {

/ / 1. ClassList API

/ / switch classes, delete them if you have them, add them if you don't

If (element.classList.toggle) {

Element .classList.toggle (cName)

Return to true

}

/ /! In fact, if this function toggleClassList is supported

/ / then the following code will not be executed. It is only demonstrated here. Please apply it flexibly.

/ / 2. ClassList API

/ / whether the class attribute of the element contains the hidden CSS class

Var hasHide = element.classList.contains (cName)

/

If (hasHide) {

/ / 3. ClassList API

/ / removable hidden class

Element.classList.remove (cName)

} else {

/ / 4. ClassList API

/ / add a hidden class

Element.classList.add (cName)

}

Return to true

}

/ / use the className attribute (Dom element, css class name)

Function toggleClassName (element,cName) {

Var className = element.className | | "

/ /

Remove the blank cName = cName.replace (/ ^ / s * | / s * $/ g, "")

/ / cName fails if it contains white space characters. If you want to deal with it properly, it can be divided into layers and dealt with separately.

Var blankReg = / / s + /

If (blankReg.test (cName)) {

Warn ("'" + cName + "'with white space characters in the middle")

Return to false

}

/ / regular, / b represents the boundary of visible consecutive characters, which is understandable:

/ / "hide2 hide hide myname" then

/ / there is a virtual one before and after hide2, and there is also a virtual one before and after / bPermine hide.

/ / but hi and. Not between Germany and Germany.

/ / g indicates an one-line global situation

/ / variants represent = / / Byde / b / g

Var rep = new RegExp ("/ / b" + cName + "/ / b", "g")

If (represent

} else {

ClassName + = "" + cName

}

/ / replace the new className. Element.className

= className

Return to true

}

/ / function, switch (element id,className)

Function toggleClass (elementId,cName) {

/ / get a DOM element

Var element = document.getElementById (elementId)

/ / if no element exists

If (! Element) {

Warn ("element with id" + elementId + "does not exist")

Return to false

}

If (! Element.classList) {

Warn ("elements with id of" + elementId + "do not support classList attributes and will be implemented by other means")

Returns toggleClassName (element,cName)

} else {

Return toggleClassList (element,cName)

}

}

Function testDataset () {

/ /

Var intro = document.getElementById ("intro")

/ / Note this is not the id attribute, but the value of data-id.

Var id = intro.dataset.id

/ / data website

Var website = intro.dataset.website

/ / data-blog-url, hump nomenclature..

Var blogUrl = intro.dataset.blogUrl

/ / data-my-name

Var myName = intro.dataset.myName

/ /

Var msg = "qq:" + id

+ ", website:" + website

", blogUrl:" + blogUrl

", myName:" + myName

/ /

Warn (msg)

}

/ / dom is executed after loading

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

}, wrong)

Close

Loading

< / div>

open

Click this area to view the menu

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.