Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
The jQuery .css method is used to GET or SET DOM element CSS properties.
The following tutorial will demonstrate 4 core concepts of jQuery’s .css method
When looking to GET a CSS property with jQuery’s .css method, jQuery will return the first matched element’s CSS properties. So, you will want to pay close attention to the jQuery selector used when requesting a CSS property. If you pass a class into the selector and a group of elements gets returned, jQuery’s .css method will only show CSS properties for the first matched element in the group of matched elements.
Let’s start by taking a look at using jQuery’s .css method to GET a CSS property from a DOM element with a class of box. In this first example, let’s create a <div> with a solid background color
.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
To return multiple CSS properties, pass in an array of CSS properties. Passing in an array of CSS properties will return an object with CSS key:”value” pairs
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"
Next, let’s take a look at how to set CSS properties with jQuery. When looking to SET CSS properties, all matched elements returned by the selector will have the css properties defined SET. Setting properties with jQuery’s .css method makes updating a large group of html elements easy. You could update all of paragraph tags in your docuemnt with just one line of code.
$('.box').css('opacity', '0.2');
Finally, setting multiple css properties with jQuery can be done by passing in a javascript object. The key is name of the css property, and the value will be the css value. A good practice is to enclose the keys within quotes to avoid errors with certain css properties such as background-color which has a hyphen between background and color.
$('.box').css({
'opacity': '1',
'width': '50px',
'height': '50px',
'background-color': '#f48035'
});
To summarize, jQuery’s .css method makes getting and setting css properties with javascript convenient and easy. Whether you are looking to get the font size of some text, or set the width and height of an html element, jQuery’s .css method is a great addition to your tool set. One detail to note when getting a css property, is the css values will get returned as a string. However, when setting a css property such as opacity, width, height, etc.. the .css method conveniently accepts strings or numbers. When setting multiple css properties, a good practice is to wrap your javascript’s object keys in single or double quotes.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.