How to get the value of an attribute in Jquery?

Asked

Viewed 1,286 times

0

Here’s what I need to do: when a person clicks on an image, the display attribute of a 'ul' is changed to block, and then, when that person clicks again, the attribute value is 'None'. I wanted to take the value of the display attribute from that list to make if the value is 'block', when it clicks 'ul' the value is 'None' and it goes away.

HTML

<html>
<head>
    <meta charset="utf-8"/>
    <title>Teste</title>
</head>
<body>

    <img src="../imagem.png" id="imagem"/>

    <ul id="lista">
    <li>Item de lista</li>
    </ul>

</body>

Jquery

 $(document).ready(function() {
            $("ul#lista").css('display', 'none');

            $("img#imagem").click(function() {
                $("#listadostres").css('display', 'block');
            })
            })
jquery html css

2 answers

1


To make the effect disappear/appear you can use the .toggle() jquery:

$(document).ready(function() {
  $("ul#lista").css('display', 'none');

  $("img#imagem").click(function() {
    $("#lista").toggle();
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <title>Teste</title>
</head>

<body>

  <img src="http://www.gper.com.br/noticias/2eb16ca9ded57e738bac82f73e5a7a6f.jpg" id="imagem" style="height: 80px"/>

  <ul id="lista">
    <li>Item de lista</li>
  </ul>


</body>

Already to capture the value of css, just do not pass the second argument in the function .css():

$(document).ready(function() {
  $("ul#lista").css('display', 'none');

  $("img#imagem").click(function() {
    if($("#lista").css('display') == "none"){
      $("#lista").css('display', 'block')   
    }else{
      $("#lista").css('display', 'none')   
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <title>Teste</title>
</head>

<body>

  <img src="http://www.gper.com.br/noticias/2eb16ca9ded57e738bac82f73e5a7a6f.jpg" id="imagem" style="height: 80px"/>

  <ul id="lista">
    <li>Item de lista</li>
  </ul>


</body>

  • It worked out! Thanks, man, I’m gonna mark it as an answer.

1

See the example below working, using the method is and the parameter :visible:

 $(document).ready(function() {
     $("#lista").css('display', 'none');
     $("#imagem").click(function() {
         if($("#lista").is( ":visible" )){
             $("#lista").css('display', 'none');
         }else{
             $("#lista").css('display', 'block');
         }
       
       console.log('Visivel: ' + $("#lista").is( ":visible" ));
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Teste</title>
</head>
<body>

    <img src="../imagem.png" id="imagem"/>

    <ul id="lista">
    <li>Item de lista</li>
    </ul>

</body>

See another example below working, using the method toggle:

 $(document).ready(function() {
         $("#lista").css('display', 'none');
         $("#imagem").click(function() {
             
            $( "#lista" ).toggle( 'display' );
             

         });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Teste</title>
</head>
<body>

    <img src="../imagem.png" id="imagem"/>

    <ul id="lista">
    <li>Item de lista</li>
    </ul>

</body>

I hope I’ve helped!

  • Thanks, man, it worked out.

  • I’m glad I could help, I could dial my answer with +1 ?

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.