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中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而 === 和 !== 只有在相同类型下,才会比较其值 ======= ...
随机推荐
- (转）Spring Boot 2 (七)：Spring Boot 如何解决项目启动时初始化资源
http://www.ityouknow.com/springboot/2018/05/03/spring-boot-commandLineRunner.html 在我们实际工作中,总会遇到这样需求, ...
- UVA1616-Caravan Robbers(二分)
Problem UVA1616-Caravan Robbers Accept: 96 Submit: 946Time Limit: 3000 mSec Problem Description Lon ...
- springboot RestTemplate请求
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 1.定义 RestTemplateConfig 配置类 @Configuratio ...
- Bean named '*' must be of type [*], but was actually of type []
本地Service 名字和调用别的maven项目Service重名
- QT socket网络通信
https://blog.csdn.net/u013007900/article/details/50411796 里主要讲解如何实现TCP和UDP的简单通信. socket简介在LINUX下进行网络 ...
- RabbitMQ用户增删及权限控制
RabbitMQ用户增删及权限控制 用户角色分类 none:无法登录控制台 不能访问 management plugin,通常就是普通的生产者和消费者. management:普通管理者. 仅可登陆管 ...
- 吴恩达课后作业学习1-week2-homework-logistic
参考:https://blog.csdn.net/u013733326/article/details/79639509 希望大家直接到上面的网址去查看代码,下面是本人的笔记 搭建一个能够 “识别猫” ...
- wxWidgets 在 Linux 下开发环境配置
本文基于 CodeBlocks (16.0.1) 和 wxWidgets (3.0.2) 搭建 Linux 下 GUI 开发环境. 1. 安装 CodeBlocks Ubuntu 默认的源当前 Cod ...
- Java8之lambda表达式
一.什么是lambda表达式? Lambda 是一个匿名函数,我们可以把 Lambda 表达式理解为是一段可以传递的代码(将代码像数据一样进行传递).可以写出更简洁.更灵活的代码.作为一种更紧凑的代码 ...
- Java NIO2：NIO概述
一.概述 从JDK1.4开始,Java提供了一系列改进的输入/输出处理的新特性,被统称为NIO(即New I/O).新增了许多用于处理输入输出的类,这些类都被放在java.nio包及子包下,并且对原j ...