`
jolestar
  • 浏览: 197152 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

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
分享到：
| 读巴别塔之犬
评论
1 楼 damoo 2007-08-21  
不错，顶一个
发表评论

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

相关推荐

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

    // 返回最终样式函数，兼容 IE 和 DOM return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]; } function getHiddenElementSize(element) { ...

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

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

    《JavaScript动态网页设计经典实例教程》源代码

    例如，使用`document.getElementById`、`document.querySelector`、`document.querySelectorAll`等方法获取元素，`element.innerHTML`、`element.style`等属性修改元素内容和样式。 3. 事件处理 - 事件是用户与...

    javascript获取元素的计算样式

    当我们要用JavaScript获取一个元素的样式信息时，最直接的方式是使用该元素的style属性，但这种方法只能获取到元素的内联样式。如果样式信息不仅存在于内联样式中，还包括外部样式表，那么使用style属性就无法获取到...

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

    ### 原生JavaScript获取元素样式的知识点解析 #### 1. JavaScript获取元素样式的原理和限制 在原生JavaScript中，获取元素样式与设置元素样式是完全不同的操作。获取样式意味着我们只能获取到当前元素的样式信息，...

    javascript获取作用在元素上面的样式属性代码

    本文将详细解释如何使用JavaScript获取元素上的样式属性，重点分析给定的代码示例。 首先，我们来看一下标题和描述中提到的关键知识点：`getComputedStyle()`方法。这是一个非常重要的JavaScript API，用于获取元素...

    原生javascript获取元素样式

    接下来，`getComputedStyle()`方法提供了获取元素最终使用的CSS属性值的能力。它返回一个对象，这个对象包含了元素的所有最终使用的CSS属性值，包括通过CSS文件、`&lt;style&gt;`标签或外部样式表应用的样式。`...

    JS改变元素样式

    有时候，我们可能需要获取元素的最终计算样式，包括浏览器可能应用的默认样式和继承样式。这可以通过`window.getComputedStyle()`实现： ```javascript var computedStyle = window.getComputedStyle(element); ...

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

    学习JavaScript获取元素样式属性值的方法，可以参考一些优秀的书籍，例如提到的“精通JavaScript”一书，其中对获取元素位置和样式属性值有深入的解释。了解这些知识，对于编写高性能、兼容性的前端代码至关重要。...

    JavaScript样式.pdf

    获取元素最终显示的样式，即CSS层叠的结果，不同的浏览器有不同的实现。IE提供了`currentStyle`属性，它返回元素的实际应用样式，不论样式来源于何处。而在W3C DOM中，我们需要使用`getComputedStyle()`全局方法，...

    浅谈javascript获取元素transform参数

    2. `window.getComputedStyle(element)`能获取元素最终的渲染规则，包括由CSS和内联样式共同作用的结果。 3. jQuery的`$.css()`方法获取的是元素的最终渲染样式，设置时则是通过内联样式完成。 4. 当需要频繁操作`...

    js获取元素外链样式的方法

    总结来说，通过上述方法和示例代码，我们可以看到如何在不同的浏览器环境下，使用JavaScript获取元素的外链样式。尽管现代浏览器基本都支持window.getComputedStyle()，但在一些老旧的IE浏览器上，仍需要使用...

    JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

    需要注意的是，`window.getComputedStyle`方法返回的是计算后的样式，即考虑了继承、浏览器默认样式、用户样式等所有因素后的最终样式。此外，由于伪元素不在DOM中，它们的样式不能通过`element.style`属性访问，...

    CSS2.0_ref.rar_css_javascript_网页设计

    例如，通过JavaScript获取元素并改变其CSS样式，如`document.getElementById('myElement').style.color = 'blue';`就能将id为'myElement'的元素颜色改为蓝色。 综上所述，CSS2.0是网页设计的重要工具，它提供了丰富...

    《JavaScript动态网页设计经典实例教程》共给网上下载的代码

    这包括获取元素、改变元素属性、插入或删除子元素等操作。 4. **AJAX异步通信**：通过XMLHttpRequest对象，JavaScript可以实现不刷新整个页面的情况下与服务器进行数据交换，实现局部更新，提升用户体验。你将学习...

    dom操作元素样式

    在网页开发过程中，我们经常会遇到需要通过JavaScript来动态地改变页面元素样式的场景。这些操作不仅能够提升用户体验，还能实现更为丰富的交互效果。DOM（Document Object Model）提供了多种方式来操作元素的样式，...

    JS操作DOM元素属性和方法大全

    - `getComputedStyle`: 获取元素的最终计算样式，包括继承和浏览器默认样式。 - `classList`: 操作元素的类名，如添加、移除、切换类。 7. **遍历DOM** - `childNodes`: 获取元素的所有子节点，包括文本节点和...

    Javascript获取CSS伪元素属性的实现代码

    除了window.getComputedStyle方法之外，还可以定义一个名为getStyle的函数，该函数能够跨浏览器获取元素的样式属性，包括伪元素的样式属性。getStyle函数的工作原理是： 1. 首先检查元素的style对象是否存在指定的...

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