【笔记】 《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”等等;

返回值须知:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值