jQuery CSS

We use css() Method in jQuery which gets or sets CSS properties for the selected element.
In order to use classes in jquery we have a set of class methods.
  1. addClass() - Adds one or more classes to the selected element
  2. hasClass() - Checks if the selected element has a specific class
  3. removeClass() - Removes one or more classes from the selected element
  4. toggleClass() - Adds or removes one or more classes from the selected element, depending on whether they are present or absent

css() Method

Gets or sets CSS properties for the selected element.
We can get specific property values using this method.
We can also set multiple css properties.
Its vary easy buit-in method used in js.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery css() Method Example</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    .styledElement {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 1px solid #ccc;
      margin: 20px;
    }
  </style>
</head>
<body>

<div id="exampleElement" class="styledElement">
  <p>This is a styled element.</p>
</div>

<script>
  // Using css() to set background color and font size
  $("#exampleElement").css({
    'background-color': 'lightblue',
    'font-size': '18px'
  });

  // Using css() to get the font size and log it to the console
  var fontSize = $("#exampleElement").css('font-size');
  console.log("Font Size:", fontSize);
</script>

</body>
</html>

Class Methods

We have 4 class methods in order to access and modify a class in an element.
  1. addClass() - Adds one or more classes to the selected element
  2. hasClass() - Checks if the selected element has a specific class
  3. removeClass() - Removes one or more classes from the selected element
  4. toggleClass() - Adds or removes one or more classes from the selected element, depending on whether they are present or absent

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Class Methods Example</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="exampleElement">
  <p>This is an example element.</p>
</div>

<script>
  // Using addClass() to add the 'highlight' class
  $("#exampleElement").addClass("highlight");

  // Using hasClass() to check if the 'highlight' class is present
  var hasHighlightClass = $("#exampleElement").hasClass("highlight");
  console.log("Has 'highlight' class:", hasHighlightClass);

  // Using removeClass() to remove the 'highlight' class
  $("#exampleElement").removeClass("highlight");

  // Using hasClass() again to check if the class is removed
  hasHighlightClass = $("#exampleElement").hasClass("highlight");
  console.log("Has 'highlight' class:", hasHighlightClass);

  // Using toggleClass() to toggle the 'highlight' class
  $("#exampleElement").toggleClass("highlight");

  // Using hasClass() to check if the class is toggled
  hasHighlightClass = $("#exampleElement").hasClass("highlight");
  console.log("Has 'highlight' class:", hasHighlightClass);
</script>

</body>
</html>

Quick Recap - Topics Covered

jQuery CSS

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message