欢迎光临杨雨的葡京赌场站!

杨雨个人网站-杨雨葡京赌场-杨照佳

杨雨葡京赌场网站

关注互联网和搜索引擎的葡京赌场网站

首页 > WEB开发 > JavaScript >

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

发布时间:2018-05-10  编辑:杨雨葡京赌场网站   点击:   

获取方法

一、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

padding-box:

border-box:

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:

详情:Cssom视图模式Cssom-view-module相关整理与介绍/

本文地址:http://itbyc.com/web/javascript/18920.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1