jQuery makes working with CSS a breeze. The method here is .css(), and it is used very much like the other methods or actions in jQuery. While this entire tutorial will go against my conventional logic of only appending or removing classes, many of you will do it this way because it is much more simple. I must admit that it is a very quick and efficient way of applying CSS properties to an HTML element. Please just don’t paint yourself in a corner using the css method after a selector more than a few times on a single element.
The jQuery CSS Method has three different structures for its 3 different arguments.
.css(name) – returns the CSS property of the value
.css(name,value) – sets a CSS property
.css({properties}) – sets multiple CSS properties
We will use the first two in this example.
It is really just that simple. If you have ever had 2 or 3 divs inside 1 containing div, you know how hard it is to make all of the columns the same height or width. With JQuery, it is really just that simple. Of course, if you won’t usually use a button to change CSS in that way, but you still may find yourself using events to change CSS for some other good reason. It would get very tedious if you wanted to change large amount of CSS properties, which is why we have the third syntax of the css() method.
Link/cite this page
If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.
<a href="https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-css/">jQuery With CSS</a>
Stewart, Suzy. "jQuery With CSS". After Hours Programming. Accessed on September 20, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-css/.
Stewart, Suzy. "jQuery With CSS". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-css/. Accessed 20 September, 2024.
Stewart, Suzy. jQuery With CSS. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/jquery-with-css/.