How CSS classes can be manipulated in HTML using jQuery?

In This blog, we are going to learn, How CSS classes can be manipulated in HTML using jQuery.

How CSS classes can be manipulated in HTML using jQuery?

How CSS classes can be manipulated in HTML using jQuery?

CSS Manipulation Using JQuery

There are several methods of CSS manipulation in jQuery. We will look at the following methods:

  • addClass() – Adds one or more classes to the specified elements.
  • removeClass() – Removes a single class, multiple classes, or all classes from the specified element(s).
  • css() – Gets or sets the style property for the specified element.
  • toggleClass() – toggles between adding/removing classes to the specified elements.
  • hasClass() – Determines whether any of the specified elements are assigned to the given CSS class.

JQuery addClass() Method

The jQuery addClass() method adds a single or multiple CSS classes to the specified elements.

Syntax:

$('selector expression').addClass('add class name');

For example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#demo1").addClass("class");
  });
});
</script>
<style>
.class{
  font-weight: bold;
  font-size: xx-large;
}
</style>
</head>
<body>

<div id="demo1">This is some text.</div>

<button>click here and add classes</button>

</body>
</html>

JQuery removeClass() Method

For Example how to remove a specific class attribute from different elements:

Syntax:

 $("h1, h2, p").removeClass("remove class name ");

For example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").removeClass("demo1");
  });
});
</script>
<style>
.demo1{
  color: blue;
}
</style>
</head>
<body>

<h1 class="demo1">Heading 1</h1>

<button>click here and remove classes</button>

</body>
</html>

JQuery css() Method

The jQuery css() method gets or sets the style property to the specified element(s).

Syntax:

$('selector expression').css('style property name','value');

$('selector expression').css({'style property name':'value',});

For example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){

    $('p').css({'background-color': 'red','width':'400px'});

  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
​
<button>change background-color of p</button>
</body>
</html>
​

JQuery toggleClass() Method

The jQuery toggleClass() method toggles between adding/removing classes to the specified elements.

Syntax:

$('selector expression').toggleClass('css class name');

For example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("demo");
  });
});
</script>
<style>
.demo{
  color: blue;
}
</style>
</head>
<body>


<p>This is another paragraph.</p>

<button>Toggle class</button>

</body>
</html>

JQuery hasClass() Method

This is a mandatory parameter. Specifies the name of the CSS class to search in the selected elements.

Syntax:

alert($("selector expression").hasClass("css class name"));  

For Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").hasClass("demo"));
  });
});
</script>
<style>
.demo{
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>


<p class="demo">This is a paragraph.</p>


<button>Click here Does any p element have an "intro" class?</button>

</body>
</html>

Hope this blog is helpful for you ,Thanks for reading this blog.

dexpoundsofttechsolution


Get three-layer categories in magento 2