脚本化CSS

最新推荐文章于 2021-07-27 14:54:21 发布

VVVGG

最新推荐文章于 2021-07-27 14:54:21 发布

阅读量494

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/VVVZCS/article/details/82155941

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

博客介绍了JavaScript操作CSS样式的方法。一是dom.style.prop可读写行间样式，无兼容性问题，但只能读写行间样式，复合属性需拆解，CSS中中划线属性要改成小驼峰式；二是查询计算样式，可用window.getComputedStyle，但IE8及以下不兼容；还提到div.currentStyle及封装兼容性方法，最后举例说明状态改变和元素移动的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，dom.style.prop

可读写行间样式，没有兼容性问题，碰到float这种的保留字属性，前面应加css

eg：dom.style.float---->dom.style.cssFloat

复合属性必须拆解

eg：

div.style会返回一个样式声明表，并且这个样式表可读可写

注意在JS中没有中划线

在CSS中是中划线的，改成小驼峰式

但是要注意，这种方法读取不到页面级CSS，只能读或写到行间样式中

2，查询计算样式

window.getComputedStyle(div, null)

获得的是当前元素获得的CSS的显示值

所以对于上面style无法读取的情况，可以使用这种方法

只读，无法写入

返回的最后计算样式都是绝对值，

IE8 以及IE8以下不兼容

window.getComputedStyle(div, null)

后面的null是用来获得伪元素的

3，div.currentStyle

计算样式只读

返回的计算样式的值不是经过转换的值

封装兼容性方法，getStyle(elem, prop);

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

实现点击一个方块让他变色

对于这种静态的状态改变，可以先把要变成的状态用css写出来，然后改变className，通过这种方法可以增加效率，并且易于维护

让小方块自己移动

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 timer = setInterval(function () {
	div.style.left = parseInt(getStyle(div, 'left')) + 1 + 'px';
	if(parseInt(getStyle(div, 'left')) > 500) {
		clearInterval(timer);
	}
}, 100);

实现滚动条