javascript和jquery中显示和隐藏属性(display)

 Pala   2017-09-22 21:27   178 人阅读  0 条评论

第一种方法:使用javascript方法:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
         mychar.style.display="none"; //不显示,隐藏
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="block";   //显示,不隐藏
        }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

精华:

document.getElementById("a").style.display="none";//隐藏
document.getElementById("a").style.display="block";//显示

第二种使用jquery:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        $("#con").css('display','none'); 
        }  
        function showtext()  
        {  
        $("#con").css('display','block'); 
        }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

精华:

//隐藏 
$("#id").css('display','none'); 

//显示 
$("#id").css('display','block'); 

或 
$("#id")[0].style.display = 'none';


本文地址:http://chenxm.cc/post/310.html
版权声明:本文为原创文章,版权归 Pala 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?