css脚本化

最新推荐文章于 2021-08-03 23:09:40 发布

uuai

最新推荐文章于 2021-08-03 23:09:40 发布

阅读量181

点赞数

分类专栏： javascript

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

dom.style.prop
1:可读写行间样式，没有兼容性问题，碰到float的保留字属性，其前面应加css （不加也可以）
2:复合属性必须拆解，组合单词变成小驼峰式
border:"1px solid black";
属性拆解
borderWidth:"1px";
borderStyle:"solid";
borderColor:"block";
小驼峰
backgroungColor:"red";

3:写入的值必须是字符串格式;

查询计算样式

window.getComputedStyle()
两个值 1：某一个元素 2：null
1.只读
2.返回的计算样式的值都是绝对值，没有相对单位
width:'10em ' 返回width:'160px'
backgroungColor:"red"; 返回backgroungColor:"rgb(255,0,0)";
ie8以下不兼容使用
ele.currentStyle
只读
返回的计算样式的值不是进过转换的绝对值

ie独有

*************

利用window.getComputedStyle获取当前元素的伪元素
window.getComputedStyle(div,'after');

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div:after{
		content: '';
		display: inline-block;
		width: 50px;
		height: 50px;
		background: gray;
	}
</style>
</head>
<body>
	<div style="width: 100px;height: 100px;background: red;"></div>
</body>

<script>
var div = document.getElementsByTagName('div')[0]；
</script>
</html>

查询到div的after的width为50px

// 封装getStyle
function  getStyle(elem,prop){
	if(window.getComputedStyle){
		return window.getComputedStyle(elem,null)[prop];
	}else {
		return elem.currentStyle[prop];
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>利用getStyle实现一个块做加速运动</title>
	<style></style>
</head>
<body>
	<div style="width: 100px;height: 100px;background: red;position:absolute;left: 0"></div>
</body>

<script>

// 封装getStyle
function  getStyle(elem,prop){
	if(window.getComputedStyle){
		return window.getComputedStyle(elem,null)[prop];
	}else {
		return elem.currentStyle[prop];
	}
}
var div = document.getElementsByTagName('div')[0]
var w = window.getComputedStyle(div,'after').width;
var speed = 2
var timer =setInterval(function(){
	speed +=speed/7;
	div.style.left=parseInt(getStyle(div,'left'))+speed+"px";
	if(parseInt(div.style.left)>500){
		clearInterval(timer)
	}
},10)

</script>
</html>