用js控制css屬性

時間 2019-12-10

原文原文鏈接

在用js控制css屬性時，行內css屬性能夠任意控制，但如果在<style></style>中寫的css屬性，均不能用alert讀取，可是賦值卻有幾種現象，css

第一種：沒法讀取，能直接賦值html

以下：函數

<!DOCTYPE html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" "/>
<style>
	div{
		width:300px;
		height:300px;
		border:1px solid blue;
	}	
</style>
</head>
<body>
	<div>
                <p>
			12345
		</p>
	</div>
</body>
<script>
	var div=document.getElementsByTagName('div')[0];
	alert(div.style.width);
	div.style.width='600px';
	</script>
</html>

第二種：沒法進行計算後的賦值，ui

div.style.width=parseInt(div.style.width)+100+'px';htm

這行代碼不起做用對象

解決方式：這種狀況下就要用到obj.currentStyle和getComputedStyle()這兩個函數來先讀取到width的值，而後進行計算，再賦值。blog

<script>
function getStyle(obj,attr)
{
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}
function t1()
{
	var div=document.getElementsByTagName('div')[0];
	div.style.width=parseInt(getStyle(div,'width'))+5+'px';//兩個方法獲取對象爲只讀
}
</script>

第三種：先直接賦值，而後進行計算後賦值，這樣可以兩次都賦值ip

即：utf-8

<script>
	var div=document.getElementsByTagName('div')[0];
	alert(div.style.width);
	div.style.width='600px';
	alert('。。。');
	div.style.width=parseInt(div.style.width)+100+'px';
</script>

這是由於在前一次賦值計算中：div.style.width='600px';已經給他賦了行內css值，因此後面一個進行計算後賦值時能夠讀取到並賦值。get

已解決~~~