1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > DOM-6 【兼容】读写样式属性 操作伪元素 运动元素初探

DOM-6 【兼容】读写样式属性 操作伪元素 运动元素初探

时间:2018-10-08 06:44:37

相关推荐

DOM-6 【兼容】读写样式属性 操作伪元素 运动元素初探

规范

<style type="text/css"></style>

<script type="text/javascript"></script>

读写样式属性

.style是访问不到css样式表的,只能访问到行内/内联的属性,当未设置行内属性时,结果为空字符串

设置时,对复合值需要拆解赋值,不拆解效率更低

oDiv.style.weight='200px';oDiv.style.border='5px solid #000';// 更合适的写法如下,拆解oDiv.style.borderWidth='5px';oDiv.style.borderStyle='solid';oDiv.style.borderColor='#000';

设置float要写成cssFloat(虽然设置float也有效果但是不规范,float是css中的保留字,也有浮点的含义)

查看元素css属性

1. 元素.style

对于不同的盒子模型是什么

当给元素设置了行内样式时

当元素未设置内联样式时

2. window.getComputedStyle(elem,null)

查看计算样式返回值是类数组属性是只读的是绝对值(非数学意义上的绝对值):em、rem转换为px,十六进制转换为rgbIE8及以下不支持

Failed to set the ‘background’ property on ‘CSSStyleDeclaration’: These styles are computed, and therefore the ‘background’ property is read-only.

at HTMLDivElement.oDiv.onclick

获取元素行内、css样式表

.style和getComputedStyle的区别

IE8支持elem.currentStyle

该方法获取到的height是否是盒子的实际高度,是由盒子模型决定的

【兼容】

function getStyles(elem, prop) {if (window.getComputedStyle) {if (prop) {return window.getComputedStyle(elem, null)[prop];} else {return window.getComputedStyle(elem, null);}} else {if (prop) {return elem.currentStyle[prop];} else {return elem.currentStyle;}}}

3.offsetWidth/offsetHeight

访问元素的实际宽高包含元素的padding、border(box-sizing为content-box时)会在元素渲染后访问(即使设置的是css样式表也能)box-sizing为content-box时,长大的速度更快,因为始终获得都是真实宽高,起始的基数不一样

在js运动中的问题,如果设置的是css样式表box-sizing为content-box时

使用box-sizing:border-box;初始的盒子变小了

box-sizing为content-box时

操作伪元素

操作伪元素最好的方法就是使用类名控制

window.getComputedStyle(elem,null)第二个参数传值可以获取after元素的只读属性

下拉选组件动画

要点,每次触发时需要先清空定时器,否则出现抖动(当mouseenter时未完全展开就mouseleave,enter的定时器还在执行,就开始了leave的定时器)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。