今天遇到个问题,用js获取网页元素的样式,如果直接用 document.getElementById("idname").style 获取的话,只能获取该元素的专有样式,即在该元素上直接用style=“”指定的样式,而无法获取由class设置的和从上级元素继承来的样式,也就是浏览器生成dom后最终的样式,所以很头痛。网上搜索了一下,找到一个办法。
- <html>
- <head>
- <style type="text/css">
- div.special{
- background-color:red;
- height:50px;
- width:50px;
- margin:10px;
- }
- </style>
- <script language="JavaScript">
- function getBackgroundColor()
- {
- var oDiv=document.getElementById("div1");
- alert(oDiv.currentStyle.backgroundColor||document.defaultView.getComputedStyle(oDiv,null).backgroundColor);
- }
- </script>
- </head>
- <body>
- <div id="div1" class="special"></div>
- <input type="button" value="Get Background Color" onclick="getBackgroundColor()">
- </input>
- </body>
- </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
分享到:
相关推荐
// 返回最终样式函数,兼容 IE 和 DOM return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]; } function getHiddenElementSize(element) { ...
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性 return obj.currentStyle...
例如,使用`document.getElementById`、`document.querySelector`、`document.querySelectorAll`等方法获取元素,`element.innerHTML`、`element.style`等属性修改元素内容和样式。 3. 事件处理 - 事件是用户与...
当我们要用JavaScript获取一个元素的样式信息时,最直接的方式是使用该元素的style属性,但这种方法只能获取到元素的内联样式。如果样式信息不仅存在于内联样式中,还包括外部样式表,那么使用style属性就无法获取到...
### 原生JavaScript获取元素样式的知识点解析 #### 1. JavaScript获取元素样式的原理和限制 在原生JavaScript中,获取元素样式与设置元素样式是完全不同的操作。获取样式意味着我们只能获取到当前元素的样式信息,...
本文将详细解释如何使用JavaScript获取元素上的样式属性,重点分析给定的代码示例。 首先,我们来看一下标题和描述中提到的关键知识点:`getComputedStyle()`方法。这是一个非常重要的JavaScript API,用于获取元素...
接下来,`getComputedStyle()`方法提供了获取元素最终使用的CSS属性值的能力。它返回一个对象,这个对象包含了元素的所有最终使用的CSS属性值,包括通过CSS文件、`<style>`标签或外部样式表应用的样式。`...
有时候,我们可能需要获取元素的最终计算样式,包括浏览器可能应用的默认样式和继承样式。这可以通过`window.getComputedStyle()`实现: ```javascript var computedStyle = window.getComputedStyle(element); ...
学习JavaScript获取元素样式属性值的方法,可以参考一些优秀的书籍,例如提到的“精通JavaScript”一书,其中对获取元素位置和样式属性值有深入的解释。了解这些知识,对于编写高性能、兼容性的前端代码至关重要。...
获取元素最终显示的样式,即CSS层叠的结果,不同的浏览器有不同的实现。IE提供了`currentStyle`属性,它返回元素的实际应用样式,不论样式来源于何处。而在W3C DOM中,我们需要使用`getComputedStyle()`全局方法,...
2. `window.getComputedStyle(element)`能获取元素最终的渲染规则,包括由CSS和内联样式共同作用的结果。 3. jQuery的`$.css()`方法获取的是元素的最终渲染样式,设置时则是通过内联样式完成。 4. 当需要频繁操作`...
总结来说,通过上述方法和示例代码,我们可以看到如何在不同的浏览器环境下,使用JavaScript获取元素的外链样式。尽管现代浏览器基本都支持window.getComputedStyle(),但在一些老旧的IE浏览器上,仍需要使用...
需要注意的是,`window.getComputedStyle`方法返回的是计算后的样式,即考虑了继承、浏览器默认样式、用户样式等所有因素后的最终样式。此外,由于伪元素不在DOM中,它们的样式不能通过`element.style`属性访问,...
例如,通过JavaScript获取元素并改变其CSS样式,如`document.getElementById('myElement').style.color = 'blue';`就能将id为'myElement'的元素颜色改为蓝色。 综上所述,CSS2.0是网页设计的重要工具,它提供了丰富...
这包括获取元素、改变元素属性、插入或删除子元素等操作。 4. **AJAX异步通信**:通过XMLHttpRequest对象,JavaScript可以实现不刷新整个页面的情况下与服务器进行数据交换,实现局部更新,提升用户体验。你将学习...
在网页开发过程中,我们经常会遇到需要通过JavaScript来动态地改变页面元素样式的场景。这些操作不仅能够提升用户体验,还能实现更为丰富的交互效果。DOM(Document Object Model)提供了多种方式来操作元素的样式,...
- `getComputedStyle`: 获取元素的最终计算样式,包括继承和浏览器默认样式。 - `classList`: 操作元素的类名,如添加、移除、切换类。 7. **遍历DOM** - `childNodes`: 获取元素的所有子节点,包括文本节点和...
除了window.getComputedStyle方法之外,还可以定义一个名为getStyle的函数,该函数能够跨浏览器获取元素的样式属性,包括伪元素的样式属性。getStyle函数的工作原理是: 1. 首先检查元素的style对象是否存在指定的...