Add css using jQuery

It is very esay to add css on html element using jQuery at run time. jQuery provide css method to manipulate the css of an element. css method add inline style on element, so I prefer addClass method instead of css method.

$('#content').css('background-color', #0162c9);

Add multiple css using jquery

$('#content').css({
  'background-color': '#000',
  'color': '#fff',
  'font-size': '20px'
});

CODE
<!DOCTYPE html>
<html>
<head>
  <title>Add css using jQuery</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function () {
          $('#btnSingle').click(function (e) {
              $('#content').css('background-color', '#0162c9');
          });

          $('#btnMultiple').click(function (e) {
              $('#content').css({
                  'background-color': '#000',
                  'color': '#fff',
                  'font-size': '20px'
              });
          });

      });
  </script>
</head>
<body>
  <div id="content">This is content div</div>
  <button id="btnSingle">Change CSS</button>
  <button id="btnMultiple">Change Multiple CSS</button>
</body>
</html>

DISPLAY
This is content div

No comments :

Please Give Your Feedback