有关textContent

最新推荐文章于 2019-11-13 20:40:28 发布

阮太太

最新推荐文章于 2019-11-13 20:40:28 发布

阅读量142

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38409767/article/details/99967995

版权

web 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
    window.onload = function(){
    	var oncl = document.getElementById('d2');
    	oncl.onclick =function(){ 	
    	var num = 	oncl.textContent == "<<" ? 1: 0;
    	switch(num){
    		case 1 :
    		document.getElementById("d1").style.display = "none";
         	oncl.innerText = ">>";
         	break;
         	case 0 :
    		document.getElementById("d1").style.display = "block";
         	oncl.innerText = "<<";
         	break;
       	}
      
    	}
        
    }
	</script>
	<style type="text/css">
	div{
		float: left;
		height: 900px;
		line-height: 500px;
		top: 0;
		bottom: 0;

	}
	#d1,#d3{ 
		background-color: #ccff00; 
		width:400px;
	}
	
	#d2{
		cursor: pointer;
		background-color: #ffcc00;
		
		width: 50px
	}
	.fade{
		width: 300px;
		opacity: 1;
		overflow: hidden;
		transition: all 1s linear;
        
	}
	.out{
		width: 0;
		opacity: 0;
	}
	</style>
</head>
<body>
	<div id="d1" class="fade">树形列表</div>
	<div id="d2">&lt;&lt;</div>
	<div id="d3">主题内容</div>
</body>
</html>

阮太太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关textContent

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ ...
复制链接

扫一扫