javascript 样式操作包括:通过 style 属性控制元素内联样式,通过 getcomputedstyle 方法获取元素生效的样式,通过改变元素类名改变伪元素样式以通过计时器实现样式动画
dom 不能直接操作 css 文件,通过操作元素的 style 属性间接操作样式
var odiv = document.getelementsbytagname('div')[0]; odiv.style.width = '100px'; odiv.style.backgroundcolor = 'red'; // style 属性即内联样式,不能得出 css 文件定义的内容 // 如果没有对应内联样式,则返回空字符串
注意
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、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>
如对本文有疑问, 点击进行留言回复!!
混合应用:(基于vue) cordova打包的应用,打开出现白屏
VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
AutoJs Pro 7.0.4-1 实战教程---史上最全快音短视频
网友评论