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 thebackground-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 thebackground-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 theblue-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 thetoggleClass()
method to toggle theblue-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.