首页»JavaScript»Javascript 获取 Dom 样式的方法有哪些

Javascript 获取 Dom 样式的方法有哪些

来源:冷谦大侠 发布时间:2018-04-14 阅读次数:

获取方法

一、element.style 属性

获取dom元素的style属性 例子: // index.html <div id="el" style="width:300px">content</div> <script> var el = document.getElementById('el') console.log(el.style.width) // => '300px' console.log(el.style.height) // => '' </script> 这种方式可获取,也可修改值。优点是兼容性比较好。缺点是有局限性,只能通过写入内联才能获取样式。

二、element.currentStyle 属性

只支持IE6~8.....

三、window.getComputedStyle(element) 方法

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值也可以获取伪类中的属性。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。文章'获取元素CSS值之getComputedStyle方法熟悉' 支持IE8以上 例子: var el = document.getElementById('el') console.log(window.getComputedStyle(element).getPropertyValue('width')) jQuery的CSS()方法就是用此方法的,

四、element.getBoundingClientRect()方法

var el = document.getElementById('el') el.getBoundingClientRect().width // 获取宽度 相关用法文章:
小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

获取宽度的方法总结

content-box:默认情况下 box-sizing: content-box

兼容性 方法
IE5.5+ element.style.width
IE6~8 element.currentStyle.width
IE8以上 window.getComputedStyle(element).getPropertyValue('width')
IE8以上 element.getBoundingClientRect().width

padding-box:

兼容性 方法
IE5.5+ element.clientWidth
IE5.5+ element.scrollWidth

border-box:

兼容性 方法
IE5.5+ element.offsetWidth

margin-box:

没有原生接口直接获取 计算方法:
1、获取元素padding-box宽度
2、获取元素margin-left和margin-right大小
3、三个数值相加
例子: var box = document.querySelector('.box') var paddingWidth = box.clientWidth; var marginLeft = +window.getComputedStyle(box).getPropertyValue('margin-left').match(/^\d*/)[0] var marginRight = +window.getComputedStyle(box).getPropertyValue('margin-right').match(/^\d*/)[0] var res = paddingWidth + marginLeft + marginRight

jQuery api:

盒子范围 方法
content-box $().width()
padding-box $().innerWidth()
border-box $().outerWidth()
margin-box $().outerWidth(true)
详情:cssom视图模式cssom-view-module相关整理与介绍/
QQ群:WEB武松娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈武松娱乐中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
武松娱乐官网