记住！！JavaScript无法获取css样式表的内容

最新推荐文章于 2025-01-04 23:26:24 发布

原创最新推荐文章于 2025-01-04 23:26:24 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #css

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍了一个使用JavaScript控制HTML列表显示与隐藏的小Demo遇到的问题。由于将display属性设置在CSS样式表中，导致JS无法正确获取并更改该属性，从而使得列表在鼠标点击第二次时才隐藏。

这篇文章给自己提个醒，今天做一个小Demo的时候，鼠标单击第二下列表ul才隐藏，是因为我把ul的display:block写在了样式表内，而js是无法获取css样式表里的内容的，只能获取行内样式或者是js创造的css样式（也是行内样式）；

<!--
	作者：shsgear@qq.com
	时间：2016-10-26
	描述：单一按钮显示和隐藏
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#outer{
			width: 220px;
			border: 1px solid #CCC;
			margin: 250px auto;
		}
		#outer h2{
			box-sizing: border-box;
			width:100%;
			height: 38px;
			border-bottom:1px solid #CCC;
			background:url(img/arrow_carrot_up_alt_16px_1143265_easyicon.net.png) no-repeat dimgrey center right;
			background-position-x:180px;
			font: 20px "微软雅黑";
			padding-left: 15px;
			line-height: 38px;
			cursor: pointer;
		}
		#outer h2.showUl{
			background:url(img/down_arrow_head_16px.png) no-repeat dimgrey center right;
			background-position-x:180px;
		}
		#outer ul{
			width: 100%;
			box-sizing: border-box;
			padding: 5px;
			padding-left: 15px;
			display: block;
			}
		#outer ul li{
			display: block;
			width: 100%;
			height: 30px;
			
			
		}
		#outer li a{
			display: block;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align:left;
			text-decoration: none;
			line-height: 30px;
			color: #696969;
		}
		#outer li a:hover{
			color: crimson;
		}
	</style>
	</head>
	<body>
	   <div id="outer">
	   	<h2>播放列表</h2>
	   	<ul >
	   		<li><a href="#">小小-容祖儿</a></li>
	   		<li><a href="#">相依为命-陈小春</a></li>
	   		<li><a href="#">特别的人-方大同</a></li>
	   		<li><a href="#">Lighters-Bruno Mars/Royce Da/Eminem</a></li>
	   		<li><a href="#">普通朋友-陶喆</a></li>
	   		<li><a href="#">阴阳先生-三无MarBlue</a></li>
	   		<li><a href="#">Because Of You-Ne-Yo</a></li>
	   	</ul>
	   </div>
	    <script>
	    	var oDiv=document.getElementById('outer')
	    	var oToggle = oDiv.getElementsByTagName('h2')[0];
	    	var oUl     = oDiv.getElementsByTagName('ul')[0];
	    	window.onload=function(){
	    		oToggle.onclick=function(){
	    			if(oUl.style.display=='block'){
	    			oUl.style.display='none';
	    			this.className='showUl';
	    			}else{
	    				oUl.style.display='block';
	    				this.className='';
	    			}
	    		}
	    	}
	    </script>
	</body>
</html>