The jQuery.css function is used to GET or SET the CSS properties of DOM elements. The lesson that follows will show four fundamental aspects of jQuery’s.css method:
- GET a DOM element’s CSS property
- GET a DOM element’s CSS attributes in multiples.
- APPLY a CSS attribute to DOM components.
- SET a number of CSS attributes on DOM components
When using the jQuery’s.css method to GET a CSS property, jQuery will return the CSS properties of the first matching element. As a result, when requesting a CSS property, you should pay special attention to the jQuery selector.
If a class is passed into the selector and a group of elements is returned, the jQuery’s.css function will only display CSS attributes for the first matched element in the group of matched elements.
To begin, consider utilizing the jQuery’s.css function to GET a CSS attribute from a DOM element with the class box. Let’s make a
.box {
background-color: #000;
width: 100px;
height: 100px;
opacity: 0.8;
}
Next, let’s use jQuery’s .css method to GET the opacity of the <div>
var box_opacity = $('.box').css('opacity');
console.log(box_opacity) // "0.8"
Note: jQuery’s .css method returns the CSS value as a string, not a number
Pass in an array of CSS properties to return various CSS properties. When an array of CSS properties is sent in, an object with CSS key:”value” pairs is returned.
var box_props = $('.box').css(['opacity', 'width', 'height', 'background-color']);
console.log(box_props); // Object {opacity: "0.8", width: "100px", height: "100px", background-color: "rgb(0, 0, 0)"}
console.log(box_props.width); // "100px"
console.log(box_props.opacity); // "0.8"
Finally, sending in a javascript object allows you to set numerous CSS properties using jQuery. The key is the CSS property name, and the value is the CSS value. To avoid issues with some CSS properties, such as background-color, which contains a hyphen between background and color, it is best to surround the keys between quotes.
$('.box').css({
'opacity': '1',
'width': '50px',
'height': '50px',
'background-color': '#f48035'
});
In conclusion, retrieving and setting CSS properties using javascript is simple and convenient thanks to the jQuery’s.css function. The.css method of jQuery is a fantastic addition to your toolkit, whether you’re trying to determine the font size of some text or change the width and height of an HTML element. When requesting a CSS property, one thing to keep in mind is that the CSS values will be provided as a string. However, the.css method conveniently supports strings or numbers when setting a CSS property like opacity, width, height, etc. It’s best practice to enclose your javascript object keys in single or double quotes when setting numerous CSS properties.
Get certification for your knowledge in the fundamentals of Computer functioning by clearing the Computer Certification Exam conducted by StudySection. After going through this Computer Certification Exam, you will be able to evaluate your basic knowledge of computers.
