查看更多详细介绍+点击收起效果

最新推荐文章于 2021-06-22 13:08:58 发布

weixin_30908941

最新推荐文章于 2021-06-22 13:08:58 发布

阅读量895

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/visi_zhangyang/archive/2012/06/14/2549708.html

本文介绍了一种使用JavaScript实现HTML元素显示与隐藏的方法，并通过按钮触发详细介绍与收起的效果。此技术利用了innerHTML属性来复制DOM元素的内容，并通过修改display样式实现了高度限制与展开收起的功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>



<DIV id=soft_instr name="soft_instr">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
1111111111<br />
22222222222<br />
3333333333<br />
444444444444<br />
5555555555555<br />
666666666666666666<br />


</DIV>


<DIV id=comm_1 name="comm_1"></DIV>
<DIV id=comm_2 style="DISPLAY: none" name="comm_2"></DIV>    
<DIV id=comm_3 style="DISPLAY: none;" name="comm_3">
    <SPAN>
        <INPUT onclick="this.value==='详细介绍'?this.value='点击收起':this.value='详细介绍';show_brief();" type=button value="详细介绍" name=botton>
    </SPAN>
</DIV>


<SCRIPT type=text/javascript> 
        document.getElementById('comm_1').innerHTML=document.getElementById('soft_instr').innerHTML; 
        document.getElementById('comm_2').innerHTML=document.getElementById('soft_instr').innerHTML; 
       
       function show_brief(){
            var obj1=document.getElementById('comm_1');
            var obj2=document.getElementById('comm_2');
            if(obj1.style.display==""){
                obj1.style.display="none";       
                obj2.style.display="";   
                 obj2.innerHTML=document.getElementById('soft_instr').innerHTML;
            }else{
                obj2.style.display="none";
                obj1.style.display="";
                 obj1.innerHTML=document.getElementById('soft_instr').innerHTML; 
            }
            
       }
            
             var _h=document.getElementById('comm_1').offsetHeight;
              document.getElementById('soft_instr').style.display="none";
 
            if(_h > 200){
                document.getElementById('comm_1').style.height="107px";
                document.getElementById('comm_1').style.overflow="hidden";
                document.getElementById('comm_3').style.display="block";
            }
           
    </SCRIPT>


</body>
</html>