Js获取元素样式值(getComputedStyle&currentStyle)兼容性解决方案

最新推荐文章于 2021-01-07 12:08:33 发布
转载 最新推荐文章于 2021-01-07 12:08:33 发布 · 235 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/kevinCoder/p/4543581.html
文章标签：

#javascript #ViewUI

因为：style(document.getElementById(id).style.XXX)只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

 

一般js获取内部样式和外部样式使用getComputedStyle，以及currentStyle。

 

IE下获取元素的实际属性值使用currentStyle属性，getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。但用这种方法在IE7，IE8，IE9获取元素属性值都会报错。

 

出于对兼容性的考虑，故将两种获取的方法封装在同一个函数中，使其见招拆招，遇到不同的浏览器，自动采取相适应的方法：

 

<script type="text/javascript">

function getStyle (obj,attr) {

return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

</script>

　　

 



 

注意在IE下，如果没有显示的设置元素的值，那么使用该方法获取的值为auto。

 

<body></body>

<script>

getStyle(document.body,'height');

</script>

　　

 

 

 

  

IE6/7/8/9中输出的都是auto。如果显示的设置了宽高，那么输出的就是实际宽高。

 

 

css:

body{height:120px;}

<body></body>

<script>

getStyle(document.body,'height');

</script>

　　

 

 



转载于:https://www.cnblogs.com/kevinCoder/p/4543581.html

JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题
10-27 281
1、 getComputedStyle() 方法获取到的是经过计算机/浏览器计算后的样式 　　getComputedStyle($("#div")).width; 　　兼容性：IE6 7 8不兼容 2、 $("#div").currentStyle(width); 　　兼容性：FF不兼容、标准浏览器不兼容 3、$("div").style.width 只能得到行间样式，如...
currentStyle和getComputedStyle的兼容写法
lpbottle的专栏
11-13 749
currentStyle：获取计算后的样式，也叫当前样式、最终样式。 优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。 注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。 alert (oAbc.currentStyle); 非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准
getComputedStyle兼容
dy3200的博客
12-16 1976
使用方法 obj.currentStyle[attr]; //IE8及以下支持 window.getComputedStyle(obj,null)[attr]; //IE8以上、FireFox、Chrome支持；参数一：元素；参数二：伪类 JavaScript中访问元素的样式 javascript中，使用驼峰的形式取CSS属性，通过style对象取得style特性中指定的样式。 例：document.getE
JS来获取全局样式值—style，currentStyle，getComputedStyle() 并解决浏览器兼容性问题
一介白衣入江南
06-03 4382
一. style对象 style读取样式 语法：元素.style.样式名 还可以设置通过style属性设置的样式 语法：元素.style.样式=样式值 注意： 如果Css的样式值含有-， 这种名称在JS中是不合法的，比如background-color 我们在使用是要把这样的名称修改为驼峰命名法 去掉-，然后将-号后的字母大写 注意：通过style属性设置和读取的都是内联样式，无...
验证style,currentStyle以及getComputedStyle的兼容性。
Ssterope的博客
06-30 1265
在此先讲解一下三者用法： obj.style.attr; obj.currentStyle.attr; getComputedStyle(obj,x).attr;前者可以用以获取+设置样式，而后两者均只能获取。其中前者可以获取的是行间样式，即内联样式。嵌入样式和外部样式都无法获取。后两者获取到的是当前样式，即浏览器最终呈现出的样式结果。 PS：三者都只能对简单样式进行获取，复合型如backg
原生javascript获取元素样式
10-24
需要注意的是，`currentStyle`不适用于非IE浏览器，且在IE6至IE8版本中也不支持`getComputedStyle()`方法，需要使用其他兼容性解决方案。 `getPropertyValue()`方法可以获取指定CSS属性的值。语法为`window....
js获取某元素的class里面的css属性值代码
10-26
描述中的“有需要的朋友可以参考一下”提示我们，这个问题的解决方案适用于那些需要在JavaScript中动态获取元素样式信息的情况。 标签“js 获取属性值”进一步明确了讨论的主题，即如何通过JavaScript获取CSS属性值...
JavaScript兼容性问题与解决方案总结
1. 获取行外样式currentStyle与getComputedStyle的兼容性问题： 在Internet Explorer浏览器（尤其是早期版本如IE6和IE7）中，可以通过`currentStyle`对象来获取元素的行内样式。而在其他现代浏览器如Chrome、Firefox...
js获取元素的外链样式的简单实现方法
10-22
这种方法提供了一种兼容性解决方案，确保在不同浏览器上都能正确获取元素的外链样式。 最后，文章通过一个简单的HTML和JavaScript示例，演示了如何使用这个`getstyle`函数。示例中包含三个段落`<p>`元素，通过点击...
javascript兼容性(实例讲解)
10-19
本文将通过实例讲解的方式，介绍几个JavaScript中的兼容性问题及其解决方案。 事件冒泡是Web开发中常见的事件处理机制，指的是一个事件不仅仅影响一个节点，而且会沿着父节点一直向上到根节点传播。这种机制在不同...
getComputedStyle currentStyle代表哪里的兼容
qq_37805832的博客
09-18 828
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *
实现浏览器兼容版的window.getComputedStyle
yihuoZhou的博客
05-25 3948
为实现浏览器兼容版的获取元素的实际样式，可以封装一个函数，下面是网易微专业上的一道练习题，后面是我写的代码封装函数。 getStyle函数用于获取元素的实际样式，语法如下：     var cssPropertyValue = getStyle (element, cssPropertyName)；     使用示例如下：      getStyle(element, “color”)
getComputedStyle方法的那些事
weixin_33754913的博客
05-26 713
一、getComputedStyle是？getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 getComputedStyle() gives the final used values of all the C...
如何用js获取元素样式(get.ComputedStyle()和currentStyle方法)
YaWen的博客
01-30 856
js获取元素的样式有好几种方法，最简单的一种是 Object.style 还有两种方法是：getComputedStyle()和obj.currentStyle
解决currentStyle不兼容问题
你好，故事中的主角。
06-09 831
[code="javascript"] var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}; [/code]
如何实现浏览器兼容版的window.getComputedStyle
liang526011569的博客
11-27 5194
window.getComputedStyle能够获取元素的实际样式，但是低版本的ie8及以下不支持，如何在低版本的ie上兼容类似的功能 //获取当前样式 function getStyle(element, att){     //特性侦测     if(window.getComputedStyle){         //优先使用W3C规范         retur
兼容获取元素当前样式 currentStyle || getComputedStyle
weixin_30877227的博客
11-11 105
function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputedStyle(ele, null)[attr]; } 转载于:https://www.cnblogs.com/hello321/p/781...
JavaScript获取样式（/获取值不对？）
weixin_45627194的博客
01-07 673
问题：用document.getElementById(‘element').style.xx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。
关于使用getElement获取元素后无法取到具体style的解决方式
qq_35590165的博客
05-15 2376
在我们使用getElementById 或者getElementByClassName获取元素的样式的时候。发现只要不是在元素的内联样式，获取到的style都为空。 这时候我们就需要用到一个js的原生函数getComputedStyle() document.defaultView.getComputedStyle(element[,pseudo-element]); 或者 window.getComputedStyle(element[,pseudo-element]); 这个函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值