【笔记】 《js权威指南》- 第16章 脚本化CSS 16.3 脚本化内联样式 - 16.4 查询计算出的样式
2016-04-08 13:50
603 查看
1.通过style属性CSSStyleDeclaration对象,然后设置相关的属性。
注意:驼峰连写转换为驼峰大小写:
2.通过设置style的cssText或者通过setgetAttribute方法来设置获取css文本:
3.css动画:
4.使用getComputedStyle方法获得最终层叠在一个元素上的样式:
参数1:元素;
参数2:通常是null, 可以是命名css伪对象的字符串:“:before”等等;
返回值须知:
注意:驼峰连写转换为驼峰大小写:
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”等等;
返回值须知:
相关文章推荐
- Gifski:一个跨平台的高质量 GIF 编码器
- 模仿动画的放大缩小容器
- JQuery插件Style定制化方法的分析与比较
- jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
- Android实现定制返回按钮动画效果的方法
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- php判断GIF图片是否为动画的方法
- CSS和JS标签style属性对照表(方便js开发的朋友)
- jQuery实现动画效果circle实例
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- ppk谈JavaScript style属性
- 浅析JavaScript动画
- js排序动画模拟-插入排序
- javascript+HTML5的Canvas实现Lab单车动画效果
- 基于javascript实现漂亮的页面过渡动画效果附源码下载
- js实现按钮颜色渐变动画效果
- filters.revealTrans.Transition使用方法小结
- CSS3中Transition属性详解以及示例分享
- 用cssText批量修改样式