JavaScriptjQuery

Adding and removing CSS from div with jquery

If you want to use add the CSS or any other external classes into your existing div or HTML then simply use the jQuery it works like a pro simple add all the scripts into your HTML pages.

As of jQuery 1.9, passing an array of style properties to.css()will result in an object of property-value pairs. For example, to retrieve all four rendered border-width values, you could use $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).

Examples:

Get the background color of a clicked div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
 
<script>
$( "div" ).click(function() {
  var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
});
</script>
 
</body>
</html>

simply, Modify that code as per your requirement.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button