【笔记】 《js权威指南》- 第16章 脚本化CSS 16.3 脚本化内联样式 - 16.4 查询计算出的样式

1.通过style属性CSSStyleDeclaration对象,然后设置相关的属性。

注意:驼峰连写转换为驼峰大小写:

e.style.fontSize = "24pt";
e.style.margin = "0px 0px 0px 0px";

2.通过设置style的cssText或者通过setgetAttribute方法来设置获取css文本:

e.setAttribute("style", s);
e.style.cssText = s;
s = e.getAttribute("style");
s = e.style.cssText;

3.css动画:

//简单的渐隐函数
function fadeOut(e, onComplete, time) {
	if (typeof e === "string") e = document.getElementById(e);
	if (!time) time = 500;
	
	var ease = Math.sqrt;
	var start = (new Date()).getTime();
	animate();
	
	function animate() {
		var elapsed = (new Date()).getTime() - start;
		var fraction = elapsed / time;
		if (fraction < 1) {
			var opacity = 1 - ease(fraction);
			e.style.opacity = String(opacity);
			setTimeout(animate, Math.min(25, time - elapsed));
		}
		else {
			e.style.opacity = "0";
			if (onComplete)
			   onComplete(e);
		}
	}
}
使用css代码实现缓动:

.fabdeable {
transition: opacity .5s ease-in;
-moz-transition: ...;
-webkit-transition: ...;
}

4.使用getComputedStyle方法获得最终层叠在一个元素上的样式:

参数1:元素;

参数2:通常是null, 可以是命名css伪对象的字符串:“:before”等等;

返回值须知:

【笔记】 《js权威指南》- 第16章 脚本化CSS 16.3 脚本化内联样式 - 16.4 查询计算出的样式_第1张图片



你可能感兴趣的:(动画,style,transition,cssText)