jQuery CSS
jQuery is a JavaScript library that can be used to manipulate HTML and CSS on a webpage.
Here are some examples of how to apply CSS styles to elements using jQuery:
Changing the background color of an element
Editor
Loading...
In this example:
- We've then added a
scripttag in the head section where we wait for the document to be ready using the$(document).ready()method. - Once the document is ready, we've attached a click event to the button using the
click()method. - When the button is clicked, we use the
css()method to change the background color of the<div>to blue. - The
css()method takes two arguments: the first is the CSS property we want to change (in this case,background-color), and the second is the value we want to set it to (in this case,blue).
Setting multiple CSS properties at once
Editor
Loading...
In this example:
- When the button is clicked, we use the
css()method to set multiple CSS properties of the<div>element at once. - We've passed an object with multiple key-value pairs to the
css()method. - The keys represent the CSS properties we want to set, and the values represent the values we want to set them to.
Removing a CSS property
Editor
Loading...
In this example:
- We're using the
css()method to remove thebackground-colorproperty of a<div>element when a button is clicked. - We've attached a click event to the button using the
click()method. - When the button is clicked, we use the
css()method to set thebackground-colorproperty of the<div>element to an empty string(""). - This effectively removes the
background-colorproperty from the element, causing it to revert to its default value (if any).
Toggling a CSS class
Editor
Loading...
In this example:
- We're using the
toggleClass()method to toggle theblue-backgroundCSS class on a<div>element when a button is clicked. - We've defined the
blue-backgroundclass in the<style>section of the HTML file. - We've attached a click event to the button using the
click()method. - When the button is clicked, we use thetoggleClass()method to toggle theblue-backgroundclass on the<div>element. - If the element already has the class, the method removes it.
- If the element doesn't have the class, the method adds it.