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中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而 === 和 !== 只有在相同类型下,才会比较其值 ======= ...
随机推荐
- 【CQOI2014】危桥
[CQOI2014]危桥 Description Alice和Bob居住在一个由N个岛屿组成的国家,岛屿被编号为\(0\)到\(N-1\).某些岛屿之间有桥相连,桥上的道路都是双向的,但是一次只能供一 ...
- Mysql SQL分组取每组前几条记录
按name分组取最大的两个val: [比当前记录val大的条数]小于2条:即当前记录为为分组中的前两条 > (select count(*) from tb where name = a.nam ...
- UVA1601-The Morning after Halloween（双向BFS）
Problem UVA1601-The Morning after Halloween Accept: 289 Submit: 3136 Time Limit: 12000 mSec Problem ...
- C# Lambda 表达式学习之（四）：动态构建类似于 c => c.Age == 2 || c.Age == 5 || c => c.Age == 17 等等一个或多个 OrElse 的表达式
可能你还感兴趣: 1. C# Lambda 表达式学习之(一):得到一个类的字段(Field)或属性(Property)名,强类型得到 2. C# Lambda 表达式学习之(二):LambdaExp ...
- BZOJ5197:[CERC2017]Gambling Guide(最短路,期望DP)
Description 给定一张n个点,m条双向边的无向图. 你要从1号点走到n号点.当你位于x点时,你需要花1元钱,等概率随机地买到与x相邻的一个点的票,只有通过票才能走到其它点. 每当完成一次交易 ...
- 第5章 Java中的锁
5.1 Lock接口 并发编程安全性需要使用到锁,synchronized是一种隐式的获得与释放锁的关键字,除此之外还有Lock接口及其实现类,该接口及实现类提供了显示获取和释放锁的方式. 除了上述编 ...
- 腾讯app自动化测试读后感
1.播放器播放视频,如何验证视频播放成功? 1.1播放时间>=0,获取Video标签里的current time判断. 1.2有播放画面,截屏获取. 框架自带的截图功能, 1.3有播放声音,获取 ...
- face alignment[Ordinary Procrustes Analysis]
人脸识别,大致可以分为以下四个步骤: 人脸检测:从图片中准确定位到人脸,并以矩形框将其裁剪出来: 人脸矫正(对齐): 检测到的人脸,可能角度不是很正,需要使其对齐,比如旋转,缩放: 特征提取:对矫正后 ...
- logistic回归和最大熵
回顾发现,李航的<统计学习方法>有些章节还没看完,为了记录,特意再水一文. 0 - logistic分布 如<统计学习方法>书上,设X是连续随机变量,X服从logistic分布 ...
- 用 Django 管理现有数据库
在多数项目中,总有一些几乎一成不变的 CRUD 操作,编写这些代码很无聊,但又是整个系统必不可少的功能之一.我们在上一个项目中也面临类似的问题,虽然已经实现了一个功能相对完整的管理后台,也尽量做到了代 ...