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 ...
随机推荐
- 什么是Spring Boot简介
1.什么是spring boot 简单的说,spring boot就是整合了很多优秀的框架,不用我们自己手动的去写一堆xml配置然后进行配置. 从本质上来说,Spring Boot就是Spring,它 ...
- 10、Java并发性和多线程-线程安全与不可变性
以下内容转自http://ifeve.com/thread-safety-and-immutability/: 当多个线程同时访问同一个资源,并且其中的一个或者多个线程对这个资源进行了写操作,才会产生 ...
- nginx: 添加文件下载目录
修改nginx.conf,添加如下行: location /file/ { alias /usr/share/nginx/html/file/; add_header Content-di ...
- CI 日志类
开发ci的过程中,使用log能直观的看出代码运行到哪,还可设置代码查看数据接口的发送情况.日志类: <?php defined('BASEPATH') OR exit('No direct sc ...
- golang 的GOPATH设置的问题
go run footer.go 的时候呢, go会依次去GOPATH 和GOROOT设置的对应路径下面找对应的包(目录和文件) 找的时候呢, 会在GoPATH 和GOROOT对应的目录后面再加一层路 ...
- The Secant Method(正割法、弦截法) 附C语言代码
弦截法是一种求方程根的基该方法,在计算机编程中经常使用. 他的思路是这种:任取两个数x1.x2,求得相应的函数值f(x1).f(x2).假设两函数值同号,则又一次取数.直到这两个函数值异号为止. 连接 ...
- Socket 长连接 短连接 心跳 JAVA SOCKET编程
简单解释就是: 短连接:建立连接,发送数据包.关闭连接 长连接:建立连接.发送数据包,发送心跳包,发送数据包,发送心跳包.发送心跳包. ..... 所以又频繁的数据收发的话.短连接会频繁创建TCP连接 ...
- VC中CString和WPARAM之间的相互转换
在传递自己定义消息的过程中.须要转换CString 变量. 在发送消息端使用例如以下方法: SendMessage(WM_MESSAG_MINE,0,(LPARAM)strVal.AllocSysSt ...
- shell 例程 —— 解决redis读取稳定性
问题背景: php读取线上redis数据,常常不稳定,数据响应时有时无. 解决方法:多次读取.每次读取全部上一次没读出的数据,直到全部获取. 本文实现用shell进行多次redis数据读取, 每次取出 ...
- LeetCode 249. Group Shifted Strings （群组移位字符串）$
Given a string, we can "shift" each of its letter to its successive letter, for example: & ...