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
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
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
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
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.