JavaScript DOM 样式操作
程序员文章站
2022-05-04 11:24:00
JavaScript 样式操作包括:通过 style 属性控制元素内联样式,通过 getComputedStyle 方法获取元素生效的样式,通过改变元素类名改变伪元素样式以通过计时器实现样式动画 ......
javascript dom 样式操作
javascript 样式操作包括:通过 style 属性控制元素内联样式,通过 getcomputedstyle 方法获取元素生效的样式,通过改变元素类名改变伪元素样式以通过计时器实现样式动画
style 属性
-
dom 不能直接操作 css 文件,通过操作元素的 style 属性间接操作样式
var odiv = document.getelementsbytagname('div')[0]; odiv.style.width = '100px'; odiv.style.backgroundcolor = 'red'; // style 属性即内联样式,不能得出 css 文件定义的内容 // 如果没有对应内联样式,则返回空字符串
-
注意
- 属性使用小驼峰写法
- 赋值使用字符串
- 复合值最好拆解,有利于提高性能,如 border
- style.float 使用 style.cssfloat 代替,不冲突保留字
getcomputedstyle 方法
-
window 下的 getcomputedstyle,返回元素生效的样式属性
window.getcomputedstyle(elem, null); var width = window.getcomputedstyle(div, null)['width']; // 返回字符串 window.getcomputedstyle(elem, 'after'); // 返回 after 伪元素的样式属性
-
getcomputedstyle 返回的数据会被转换成特定的单位,如 em 会转换为 px,十六进制颜色会转换为 rgb/rgba 等
-
ie8 及以下不支持 getcomputedstyle,可以使用 elem.currentstyle 代替
function getstyles(elem) { if (window.getcomputedstyle { return window.getcomputedstyle(elem, null); } else return elem.currentstyle; }
offsetwidth 属性
-
offsetwidth、offsetheight 可以获得元素的物理尺寸
var odiv = document.getelementsbytagname('div')[0]; odiv.offsetwidth; odiv.offsetheight; // offsetwidth = border + padding + width
-
offsetwidth、offsetheight 包括了 padding,对一些开发场景造成不便,最好使用 getcomputedstyle 方法
伪元素样式
-
::berfore,::after 伪元素的样式无法通过方法直接改变
-
通常修改关联元素的 clssname 改变伪元素的样式
.box1::after{ content: ""; background-color: red; } .box2::after{ content: ""; background-color: black; }
var odiv = document.getelementsbyclassname('box1')[0]; odiv.classname = 'box2'; // after 伪元素的样式也随之改变
样式动画
-
元素运动
通过改变元素的样式属性使其显示内容发生改变,如下拉菜单、侧边抽屉、弹出信息框等
我们经常使用 css3 或者一些封装好的框架来实现动画,动画效果可以给页面带来更好的交互体验
-
原生 js 实现样式动画
- 获取要运动的元素节点
- 明确要改变的样式属性
- 确定动画时间,动画速度和动画终止条件
- 创建计时器,终止条件下清除计时器
-
下拉菜单示例
html
<div class="dropdown"> <a href="javascript:;" class="main">下拉菜单</a> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script type="text/javascript"> var dropdown = document.getelementsbyclassname('dropdown')[0], olist = dropdown.getelementsbyclassname('list')[0], timer = null, listheight = 0, speed = 2; dropdown.onmouseenter = function () { clearinterval(timer); timer = setinterval(function () { if (listheight >= 200) { clearinterval(timer); } else { listheight = parseint(getstyles(olist)['height']) + speed; olist.style.height = listheight + 'px'; } }, 1); } dropdown.onmouseleave = function () { clearinterval(timer); timer = setinterval(function () { if (listheight <= 0) { clearinterval(timer); } else { listheight = parseint(getstyles(olist)['height']) - speed; olist.style.height = listheight + 'px'; } }, 1); } function getstyles(elem) { if (window.getcomputedstyle) { return window.getcomputedstyle(elem, null); } else return elem.currentstyle; } </script>
css
<style> .dropdown { width: 100px; } .dropdown .main { display: block; height: 50px; background-color: black; color: white; text-align: center; text-decoration: none; line-height: 50px; } .dropdown .list { overflow: hidden; height: 0; margin: 0; padding: 0; list-style: none; } .list li { height: 50px; background-color: #999; text-align: center; line-height: 50px; } .dropdown li:hover { background-color: black; color: white; } </style>
下一篇: pandas常用API_1