Visibility필터

조수경·2021년 11월 24일
0

HTML

목록 보기
81/96
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">

<script src = "../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
   $('#visible').on('click', function(){
      
      str = "";
      
      /* $('p:visible').each(function(i){}) */
      $.each($('p:visible'), function(i){
         str += $(this).text()+"<br>";
      })
      
       $('#result1 div:eq(0)').html(str); 
   /*    $('#result1 div:first-child').html(str); 왜안돼*/
      
   })
   
   $('#hidden').on('click',function(){
      str = "";
      
      $('p:hidden').each(function(i){
         str += $(this).text()+"<br>";
      })
      
       $('#result1 div:eq(1)').html(str); 
      
   })
})
</script>
</head>
<body>

<div class="box">
   
   <br>
   <button type="button" id="visible">visible</button>
   <button type="button" id="hidden">hidden</button>
   <div id="result1">
        <p> 보이는 문단</p>
        <p style="visibility:hidden">숨겨진 문단</p>
        <p style="display:none"> 자리를 차지 하지 못한 문단 </p>
       <p style="opacity:0"> 투명한 문단</p>
       
       <div></div>
       <div></div>
       
   </div>
</div>
</body>
</html>

profile
신입 개발자 입니다!!!

0개의 댓글