文档章节

JS 获取样式属性

开源昕昕
 开源昕昕
发布于 2016/04/14 16:36
字数 366
阅读 20
收藏 0

<!doctype html>

<html>

 <head>

<title>JS获取CSS属性值</title>  
<style type=”text/css”>  
<!–  
.test{color:#cdcdcd;}  
–>  
</style>  
</head>  
<body>  
<div id=”css88″ class=”test” style=”width:200px; height:200px; background:#333333″>JS获取CSS属性值</div>  
<script type=”text/javascript”>  
    alert(document.getElementById(“css88”).style.width);//200px   
    alert(document.getElementById(“css88”).style.color);//空白   
</script>      
</body>  
</html>  

上面这个例子对id为”css88″的div设置了2种烦事的样式,包括style和外部样式class。

从alert出来的信息可以看到,document.getElementById(“css88”).style方法获取不到class为ss的属性和值。

那么这么样才能获取到class为ss的属性和值呢?

IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。

具体案例如下:

方法一:

<!doctype html>

<html>

 <head>

    <title>JS获取CSS属性值</title>  

  <style>

        #aa{height:300px;width:500px;border:solid 1px #5d5d5d;color:red;}

  </style>

  

 </head>

 <body>

  <div id="aa">0000</div>

  <script>

        function GetCurrentStyle (dd, prop) {     

        if (dd.currentStyle) {        

        return dd.currentStyle[prop];     

        }      

        else if (window.getComputedStyle) {        

        propprop = prop.replace (/([A-Z])/g, "-$1");           

        propprop = prop.toLowerCase ();        

        return document.defaultView.getComputedStyle (dd,null)[prop];     

        }      

        return null;   

        }   

        var dd=document.getElementById("aa");   

        alert(GetCurrentStyle(dd,"color"));

  </script>

 </body>

</html>

方法二(可将方法一简化为如下):

  <script>

        function getDefaultStyle(dd,attribute){ 

        // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性   

        return dd.currentStyle?dd.currentStyle[attribute]:document.defaultView.getComputedStyle(dd,false)[attribute];   

        }

        var dd=document.getElementById("aa");   

        alert(getDefaultStyle(dd,"color"));

  </script>




© 著作权归作者所有

开源昕昕
粉丝 0
博文 33
码字总数 10933
作品 0
朝阳
前端工程师
私信 提问
加载中

评论(1)

开源昕昕
开源昕昕 博主
这个方法确实比较好
JQuery中操作Css样式的方法

获取和设置样式 追加样式 移除样式 切换类名 判断是否含有某项样式 获取css样式中的样式 设置单个样式 设置多个样式 offset()方法 它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含...

Bery
2017/10/20
18
0
Firefox和IE之间7个JavaScript的差异

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。 这篇文章...

asurann
2010/01/26
98
0
5种你未必知道的JavaScript和CSS交互的方法

随着浏览器不断的升级改进,CSS和JavaScript之间 的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和...

oschina
2014/04/03
5.6K
20
Firefox和IE之间7个JavaScript的差异

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。 这篇文章...

crazyinsomnia
2010/01/21
512
1
JavaScript获取和控制CSS样式对照表

大家都知道,用document.getElementById(‘element’).style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们...

曾杨
2014/02/09
224
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 开发语言和语言开发的能一样么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌:#今日歌曲推荐# 分享The Score的单曲《Revolution》 《Revolution》- The Score 手机党少年们想听歌,请使劲儿戳(这里) @批判派...

小小编辑
今天
1K
16
oracle ORA-39700: database must be opened with UPGRADE option

ORA-01092: ORACLE instance terminated. Disconnection forced ORA-00704: bootstrap process failure ORA-39700: database must be opened with UPGRADE option 进程 ID: 3650 会话 ID: 29......

Tank_shu
今天
3
0
分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
聊聊DubboDefaultPropertiesEnvironmentPostProcessor

序 本文主要研究一下DubboDefaultPropertiesEnvironmentPostProcessor DubboDefaultPropertiesEnvironmentPostProcessor dubbo-spring-boot-project-2.7.3/dubbo-spring-boot-compatible/au......

go4it
昨天
3
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部