JS——样式获取的兼容写法
样式获取
- 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式，只能获取行内式
window.getComputedStyle(div, null)
- 返回元素的长宽等带有单位px
- 第二个参数是伪类，没有填null
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 400px;
height: 500px;
background-color: black;
margin-left: 500px;
position: relative;
} div:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background-color: pink;
top: 50px;
left: 100px;
}
</style>
</head> <body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
console.log(typeof window.getComputedStyle(div, null)); //object
console.log(window.getComputedStyle(div,':after')['width']);//50px
console.log(window.getComputedStyle(div, null).width); //400px
console.log(window.getComputedStyle(div, null)["width"]); //400px
console.log(window.getComputedStyle(div, null)["background-color"]); //rgb(255, 192, 203)
console.log(window.getComputedStyle(div, null).backgroundColor); //rgb(255, 192, 203)
</script>
</body>
</html>
div.currentStyle（IE678）
<script>
var div = document.getElementsByTagName("div")[0];
console.log(div.currentStyle["width"]);
console.log(div.currentStyle.width);
</script>
兼容写法
<script>
var div = document.getElementsByTagName("div")[0];
console.log(getStyle(div, "width"));
console.log(getStyle(div, "backgroundColor")); function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
JS——样式获取的兼容写法的更多相关文章
- js事件的一些兼容写法
事件兼容 事件对象的兼容 获取键码兼容 默认行为兼容 阻止事件冒泡兼容 事件监听兼容 ---- 封装 删除事件监听兼容 ---- 封装 事件委托->获取事件源兼容
- js处理事件冒泡（兼容写法）
event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event. ...
- js Date格式化时间兼容写法
var time = "2018-03-12 11:11:11".split(/[- : \/]/); date = new Date(time[0], time[1]-1, ti ...
- js基础--获取浏览器当前页面的滚动条高度的兼容写法
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- javascript获取行间样式和非行间样式--兼容写法
style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...
- 为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 样式计算的几种方式与兼容写法：getComputedStyle¤tStyle&style
window.getComputedStyle(element,[string]) 1参为需要获取样式的元素,2参指定伪元素字符串(如“::after”,不需要则为null),设置2参可获取eleme ...
随机推荐
- codevs3411 洪水
题目描述 Description 小浣熊松松和朋友到野外露营,没想到遇上了π年一次的大洪水,好在松松是一只爱观察的小浣熊,他发现露营地的地形和洪水有如下性质: ①露营地可以被看做是一个N*M的矩形方阵 ...
- 记一次 Hibernate 插入数据中文乱码报错解决
错误描述 程序运行,向表中插入数据(包含中文)报错:\xE6\xB2\x88\xE9\x9B\xAA... 但是自己另外新建一个数据库手动插入数据中文正常,同样修改数据库,表的编码之后同样不行.而且 ...
- 关于SVN版本冲突问题
版本冲突原因: 假设A.B两个用户都在版本号为100的时候,更新了kingtuns.txt这个文件,A用户在修改完成之后提交kingtuns.txt到服务器,这个时候提交成功,这个时候kingtuns ...
- 苹果iOS手机后门的”诊断功能论“不攻自破
7月23日.苹果公司公布公告,题为"iOS:About diagnostic capabilities"("iOS:关于诊断功能").当中声称:iOS offe ...
- License使用成本估算
License使用成本估算 Licmanager系统的成本估算模块是以參数估算法为基础的计算机成本估算软件,内部包括多个成本估算关系式,综合反映了license的使用特征.产品项目特征以组织经济环境等 ...
- CocoaPods pod instal慢、卡住解决方法
CocoaPods pod install慢.卡住解决方法 近期使用CocoaPods来加入第三方类库,不管是运行pod install还是pod update都卡在了Analyzing depend ...
- Android View measure （三） 经常用法
ViewGroup.measureChildren() ViewGroup.measureChild() ViewGroup.measureChildWithMargins() /** * Ask o ...
- 一个样例看清楚JQuery子元素选择器children()和find()的差别
近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...
- Selenium中配置链接使用FTP服务
Enable the default report solution Step1: Create a suite listener and add codes into it, please watc ...
- Codeforces Round #142 (Div. 2)B. T-primes
B. T-primes time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...