All geek questions in one place

Can we edit the exsiting element class using jquery?

I want to change the styles of an existing element class. Can we do this in jQuery? If not, what could be an alternative approach?

+3
source share
3 answers

I don’t think it’s possible to edit the class using jQuery, and you shouldn’t in any case, since all the styles you want to use should already be defined in your stylesheet. You do not want to edit both JS files and CSS files to subsequently change your styles.

But if you absolutely need to, or if it is less of a style change than the behavior of the user interface (for example, you want to hide all elements of the class .warning, then you can just do something like:

$(".warning").css('display', 'none');

However, in addition to hiding / showing the elements, you just want to simply change the class of the element using addClass()/ removeClass()/ toggleClass(), as others have mentioned.

+1
source

yes, you can change the class with toggleand change the style of the element you can use . css() jquery method.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>

    <li>Take a jog</li>
  </ul>
<script>
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

</script>
</body>
</html>
+1
source

jQuery, .addClass, .removeClass.

. - - toggleClass.

. jQuery :

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

http://api.jquery.com/toggleClass/

You can also set css styles explicitly using the .css function, but it does nothing with classes, so I'm not sure if this is what you are looking for:

http://api.jquery.com/css/

+1
source

Source: https://habr.com/ru/post/1753108/

More articles:


All Articles