您的位置:首页 > Web前端 > CSS

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

2016-04-08 13:50 603 查看
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”等等;

返回值须知:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息