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

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

    博客分类:
  • js
阅读更多

 今天遇到个问题,用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

分享到:
评论

相关推荐

    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对象是否存在指定的...

Global site tag (gtag.js) - Google Analytics