`
hyw520110
  • 浏览: 211855 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript获取网页元素的最终样式

    博客分类：
  • js
JavaScriptIEASPCSS浏览器 
阅读更多

 今天遇到个问题，用js获取网页元素的样式，如果直接用 document.getElementById("idname").style 获取的话，只能获取该元素的专有样式，即在该元素上直接用style=“”指定的样式，而无法获取由class设置的和从上级元素继承来的样式，也就是浏览器生成dom后最终的样式，所以很头痛。网上搜索了一下，找到一个办法。
     

 
  1. <html>  
  2. 　　<head>  
  3. 　　<style type="text/css">  
  4. 　　div.special{  
  5. 　　 background-color:red;  
  6. 　　 height:50px;  
  7. 　　 width:50px;  
  8. 　　 margin:10px;  
  9. 　　}  
  10. 　　</style>  
  11. 　　<script language="JavaScript">  
  12. 　　function getBackgroundColor()  
  13. 　　{  
  14. 　　 var oDiv=document.getElementById("div1");  
  15. 　　 alert(oDiv.currentStyle.backgroundColor||document.defaultView.getComputedStyle(oDiv,null).backgroundColor);  
  16. 　　}  
  17. 　　</script>  
  18. 　　</head>  
  19. 　　<body>  
  20. 　　<div id="div1" class="special"></div>  
  21. 　　<input type="button" value="Get Background Color" onclick="getBackgroundColor()">  
  22.     </input>  
  23. 　　</body>  
  24. 　　</html>  


      注意：oDiv.currentStyle.backgroundColor是IE使用的方法，document.defaultView.getComputedStyle(oDiv,null).backgroundColor是DOM使用的方法。

       内容来源：http://blog.tianya.cn/blogger/post_show.asp?BlogID=666817&PostID=7224874&idWriter=0&Key=0

分享到：
| struts2的时间格式转换问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法： 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle...

    利用原生JavaScript获取元素样式只是获取而已

    ps：是获取样式，不是设置样式。若没有给元素设置样式值，则返回浏览器给予的默认值。...2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。 代码如下: window.getComputedStyle

    原生javascript获取元素样式属性值的方法

    实际应用中, 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从Css中获取元素的最终样式属性.

    JS getStyle获取最终样式函数代码

    } 定义一个id=”flower”的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性 ”flower”&gt;…&lt;/div&gt; getStyle函数: 这里用到了三个原型扩展 String.prototype.capitalize 这个方法是让字符...

    你未必知道的JavaScript和CSS交互的5种方法

    用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值，但能获取伪元素(pseudo-element)的属性值吗？可以的，使用JavaScript也可以访问页面中的伪元素。 代码如下:...

    如何获取元素的最终background-color

     用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。 二、题目解析  1.考察底层JavaScript基础  前端开发，日常最常接触的就是页面样式的编写。而摆脱jQuery等工具库，...

    javascript与CSS复习（《精通javascript》）

    如：elem.style.height 或者 elem.style.height = ‘100px’, 这里要注意的...为了获取元素真实、最终的样式，书中给出了一个函数 代码如下: //get a style property (name) of a specific element (elem) function ge

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

    jQuery权威指南-源代码

    3.2.3　获取或设置元素值/51 3.2.4　元素样式操作/53 3.3　创建节点元素/58 3.4　插入节点/60 3.4.1　内部插入节点方法/60 3.4.2　外部插入节点方法/64 3.5　复制节点/66 3.6　替换节点/68 3.7　包裹节点/69 3.8　...

    jquery-hotspot：响应式jQuery插件，用于在HTML元素中创建和显示Hotspots

    jQuery-热点 一个用于在HTML元素中创建热点的插件。 该插件以两种模式运行，即admin和... 将要为其获取热点HTML元素与另一个元素包装在一起。 还包括jquery.hotspot.css文件，以配合一些默认的设计决策。 &lt;di

    HTML5高级程序设计

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localstorage与session-storage 180 9.3.5 web storage api的其他特性和函数 180 9.3.6 更新web storage后的通信 182 9.3.7 探索web storage 183 9.4 ...

    open-donation-widget:HTMLJS 捐赠小部件允许货币透明

    它将样式留给最终用户（但有计划为流行的前端框架添加一些默认样式）。 还计划增加对流行后端框架的支持，使其易于集成。 安装 open-donation-widget 旨在在浏览器中使用。 最简单的方法是在build/文件夹中获取...

    完整版《HTML5高级程序设计》2

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localStorage与session-Storage 180 9.3.5 Web Storage API的其他特性和函数 180 9.3.6 更新Web Storage后的通信 182 9.3.7 探索Web Storage 183 9.4 构建...

    完整版《HTML5高级程序设计》4

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localStorage与session-Storage 180 9.3.5 Web Storage API的其他特性和函数 180 9.3.6 更新Web Storage后的通信 182 9.3.7 探索Web Storage 183 9.4 构建...

    完整版《HTML5高级程序设计》5

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localStorage与session-Storage 180 9.3.5 Web Storage API的其他特性和函数 180 9.3.6 更新Web Storage后的通信 182 9.3.7 探索Web Storage 183 9.4 构建...

    完整版《HTML5高级程序设计》3

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localStorage与session-Storage 180 9.3.5 Web Storage API的其他特性和函数 180 9.3.6 更新Web Storage后的通信 182 9.3.7 探索Web Storage 183 9.4 构建...

    HTML5高级程序设计.part5

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localStorage与session-Storage 180 9.3.5 Web Storage API的其他特性和函数 180 9.3.6 更新Web Storage后的通信 182 9.3.7 探索Web Storage 183 9.4 ...

    HTML5高级程序设计.part4

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localStorage与session-Storage 180 9.3.5 Web Storage API的其他特性和函数 180 9.3.6 更新Web Storage后的通信 182 9.3.7 探索Web Storage 183 9.4 ...

    HTML5高级程序设计.part1

    9.3.2 设置和获取数据 178 9.3.3 封堵数据泄漏 179 9.3.4 localStorage与session-Storage 180 9.3.5 Web Storage API的其他特性和函数 180 9.3.6 更新Web Storage后的通信 182 9.3.7 探索Web Storage 183 9.4 ...

Magicbox
Global site tag (gtag.js) - Google Analytics