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中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而 === 和 !== 只有在相同类型下,才会比较其值 ======= ...
随机推荐
- 并发控制--Concurrency control--乐观、悲观及方法
In information technology and computer science, especially in the fields of computer programming, op ...
- 实现ppt幻灯片播放倒计时
需求:为控制会议时间,采取ppt幻灯片播放倒计时的办法,倒计时5分钟. 分析:用EnumWindows枚举窗口,发现PPT窗口类名有三种:PP12FrameClass.MS-SDIb.screenCl ...
- ubuntu18.04 pip换源 永久修改
1. 创建pip.conf文件 cd ~/.pip 如果提示目录不存在的话,我们要自行创建一个,再进入目录 mkdir ~/.pip cd ~/.pip 在.pip目录下创建一个pip.conf文件 ...
- Leetcode:0027
Leetcode:0027 题目:给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 ...
- 测试 Flask 应用
测试 Flask 应用 没有经过测试的东西都是不完整的 这一箴言的起源已经不可考了,尽管他不是完全正确的,但是仍然离真理不远.没有测试过的应用将会使得提高现有代码质量很困难,二不测试应用程序的开发者, ...
- ORA-20011 ORA-29913 KUP-11024 GATHER_TABLE_STATS
--alter 日志Sat Mar 30 22:01:08 2019DBMS_STATS: GATHER_STATS_JOB encountered errors. Check the trace f ...
- Python排序算法——快速排序
有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10768593.html 排序算法(Sortin ...
- 支持“xxxContext”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库
将项目的数据库连接用户及密码修改后(切换用户,用户名与原来不一样,用户下对象结构一致),报以下错误: 支持“XXXDBContext”上下文的模型已在数据库创建后发生更改.请考虑使用 Code Fir ...
- springboot 集成 jpa/hibernate
pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- Unity3D中Isometric Tilemap功能实践
前言 最近出于兴趣想自己做一个2D的游戏,因为有着C#的基础,所以决定使用Unity3D来做. 之前对于Unity3D其实了解不多,不过看了一些Unity3D的视频和官方文档后,暂时做起来也没遇到什么 ...