Skip to main content

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 script tag 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 the background-color property 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 the background-color property of the <div> element to an empty string ("").
  • This effectively removes the background-color property 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 the blue-background CSS class on a <div> element when a button is clicked.
  • We've defined the blue-background class 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 the toggleClass() method to toggle the blue-background class 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.