classList trong js
HTML DOM classList PropertyElement Object Show
ExampleAdd the "mystyle" class to a element: document.getElementById("myDIV").classList.add("mystyle");Try it Yourself » More "Try it Yourself" examples below. Definition and UsageThe classList property returns the class name(s) of an element, as a DOMTokenList object. This property is useful to add, remove and toggle CSS classes on an element. The classList property is read-only, however, you can modify it by using the add() and remove() methods. Cross-browser solution: The classList property is not supported in IE9 and earlier. However, you can use the className property or regular expressions for a cross-browser solution (see "More Examples" on the bottom of this page). Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Property classList 8.0 10.0 3.6 5.1 11.5 Syntax element.classListProperties Property Description length Returns the number of classes in the list. This property is read-onlyMethods Method Description add(class1, class2, ...) Adds one or more class names to an element.If the specified class already exist, the class will not be added contains(class) Returns a Boolean value, indicating whether an element has the specified class name.Possible values:
Technical Details Return Value: A DOMTokenList, containing a list of the class name(s) of an elementMore ExamplesExampleAdd multiple classes to a element: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");Try it Yourself » ExampleRemove a class from a element: document.getElementById("myDIV").classList.remove("mystyle");Try it Yourself » ExampleRemove multiple classes from a element: document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");Try it Yourself » ExampleToggle between two classes for a element: document.getElementById("myDIV").classList.toggle("newClassName");Try it Yourself » ExampleGet the class name(s) of a element: I am a DIV element var x = document.getElementById("myDIV").classList; Try it Yourself » ExampleFind out how many class names a element has: var x = document.getElementById("myDIV").classList.length; Try it Yourself » ExampleGet the first class name (index 0) of a element: var x = document.getElementById("myDIV").classList.item(0); Try it Yourself »
ExampleFind out if an element has a "mystyle" class: var x = document.getElementById("myDIV").classList.contains("mystyle"); Try it Yourself » ExampleFind out if an element has a "mystyle" class. If so, remove another class name: var x = document.getElementById("myDIV"); ExampleToggle between classes to create a dropdown button: // Get the button, and when the user clicks on it, execute myFunction Fallback Example: addA cross-browser solution when using the classList.add() method, for IE9 and earlier: var x, name, arr; Fallback Example: removeA cross-browser solution when using the classList.remove() method, for IE9 and earlier: var x = document.getElementById("myDIV"); Fallback Example: containsA cross-browser solution when using the classList.contains() method, for IE9 and earlier: var x = document.getElementById("myDIV"); Fallback Example: toggleA cross-browser solution when using the classList.toggle() method, for IE9: var x = document.getElementById("myDIV"); ExampleCreate a sticky navigation bar: // Get the navbar Related PagesCSS Tutorial: CSS Syntax CSS Reference: CSS .class Selector HTML DOM Reference: HTML DOM className Property HTML DOM Reference: HTML DOM getElementsByClassName() Method HTML DOM Reference: HTML DOM Style Object Element Object Video liên quan |