js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
- 用js的style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。
- currentStyle可以弥补style的不足（可获取内联样式，内部样式和外部样式），但是只适用于IE。
- getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
注意：
- currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
- 如果要设置相应值，应使用style。
兼容方法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js用currentStyle和getComputedStyle获取css样式</title>
<style type="text/css">
#div1{width:200px; height:200px; background:red;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr]; //只适用于IE
}
else
{
return getComputedStyle(obj,false)[attr]; //适用于FF,Chrome,Safa
} }
window.onload=function()
{
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'))
}
</script>
</head> <body>
<div id="div1" style="width:100px;"></div>
</body>
</html>
js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法的更多相关文章
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...
- Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法
style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...
- js中style,currentStyle和getComputedStyle的区别
1.style只能获取元素的内联样式,内部样式和外部样式是获取不到的.例子: <div id="test" style="width:100px;height:20 ...
- style,currentStyle和getComputedStyle的区别
样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...
- JavaScript中style, currentStyle和 getComputedStyle的异同
今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- js中style.display=""无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
- 【前端】js中new和Object.create()的区别
js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...
- JS中的== 、===的用法和区别。
JS中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而 === 和 !== 只有在相同类型下,才会比较其值 ======= ...
随机推荐
- java访问mysql数据库
package com.mysql.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql.R ...
- centos7下安装docker（15.8docker跨主机容器通信总结）
性能:underlay网络的性能优于overlay.Overlay网络利用隧道技术,将数据包封装到UDP中进行传输,由于涉及数据包的封装和解封,存在额外的CPU和网络的开销,虽然几乎所有overlay ...
- UVA12569-Planning mobile robot on Tree (EASY Version)（BFS+状态压缩）
Problem UVA12569-Planning mobile robot on Tree (EASY Version) Accept:138 Submit:686 Time Limit: 300 ...
- 【转】iOS中修改AVPlayer的请求头信息
在开发中, 我们经常需要在网络请求时修改HTTP/HTTPS的请求头信息 1.普通AFN请求 #import "LMHTTPSessionManager.h" #import &l ...
- Nginx 反向代理 -- 一路上的坑转载
个人学习之用转子https://www.cnblogs.com/xjbBill/p/7477825.html 前些天刚过来新公司上班,公司的项目都挺多的,只不过项目都是第三方公司团队开发的,现在本公司 ...
- 在Windows .NET平台下使用Memcached （Enyim使用）
1. 启动并配置Memcached的服务端 1. 下载Memcached http://download.csdn.net/download/ful1021/7969231 2. 解压到任意目录下, ...
- 转载：遇到BITMAP CONVERSION TO ROWIDS 后解决与思考
今天遇到一个案例,有点价值写下来,以后多看看 SQL: select t.order_id, t.spec_name, t.staff_code, t.staff_code as xxbStaffCo ...
- SpringMVC处理跨域请求时的一个注意事项
由于公司对SpingMVC框架里面的东西进行了扩展,在配置SpringMVC时没有使用<mvc:annotation-driven>这个标签.而且是自己手动来配置HandlerMa ...
- 蓝牙speaker配对流程源码分析
这篇文章简单分析一下 蓝牙音箱配对流程.现在的音箱基本都支持security simple pairing.所以这里的流程基本上就是ssp的代码流程. 源码参考的是 Android 6.0 上面的bl ...
- 【开源】Skatch 正式发布 - 极速渲染抽象派草图
极速渲染抽象派草图 DEMO Simple Letter 简介 Skatch 这个词由 sketch wechart abstract cax 混合而成的一个新词,代表了cax wechart 抽象艺 ...