用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

已解决~~~