
M4Q css and classes
Manipulate element styles and classes.
style()
Get the current calculated style value for first element in matched set. Value retrieve from attribute style
or get computed
value.
Returned value contains units measuring. If the property name is not specified, the object of all element properties is returned.
<div id="div" style="width: 100px;">This a example text</div>
console.log( $("#div").style() ); // Outputs: [object CSSStyleDeclaration]
console.log( $("#div").style("width") ); // Outputs: 100px
console.log( $("#div").style("left") ); // Outputs: 0px
console.log( $("#div").style("width, left") ); // Outputs: {left: ..., width: ...}
css()
Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
<div id="div" style="width: 100px;">This a example text</div>
console.log( $("div").css() ); // Outputs: [object CSSStyleDeclaration]
console.log( $("div").css("color") ); // Outputs: rgb(0, 0, 0)
console.log( $("div").css("left, width") ); // Outputs: {left: "auto", width: "1242px"}
$("div").css("color", "red"); // Set color to red
$("div").css({
color: "red",
background: "black"
}); // Set complex styles
addClass()
Adds the specified class(es) to each element in the set of matched elements.
$( "p" ).addClass( "myClass yourClass" );
removeClass()
Remove the specified class(es) from each element in the set of matched elements.
$( "p" ).removeClass( "myClass yourClass" );
toggleClass()
Add or remove the specified class(es) from/for each element in the set of matched elements.
$( "p" ).toggleClass( "myClass yourClass" );
hasClass()
Determine whether any of the matched elements are assigned the given class.
<div id="mydiv" class="foo bar"></div>
$( "#mydiv" ).hasClass( "foo" ); // true
$( "#mydiv" ).hasClass( "quux" ); // false
clearClasses()
Determine whether any of the matched elements are assigned the given class.
<div id="mydiv" class="foo bar"></div>
$( "#mydiv" ).clearClasses(); // Outputs <div id="mydiv" class></div>