封装兼容性方法getStyle(elem,prop)获取元素的css属性

最新推荐文章于 2021-04-10 09:21:52 发布
最新推荐文章于 2021-04-10 09:21:52 发布
阅读量302 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js，es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37635519/article/details/90270795
博客主要讲述了封装兼容性方法getStyle(elem,prop)来获取元素的CSS属性，这在前端开发中有助于解决不同浏览器对CSS属性获取的兼容性问题，提升代码的通用性和稳定性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


 Element.prototype.getStyle=function(prop){
 			if(window.getComputedStyle){
 				return window.getComputedStyle(this,null)[prop]
 			}else{
 				return this.currentStyle[prop];
 			}
 }
兼容浏览器的获取指定元素（elem）的样式属性（name）的方法
weixin_34150830的博客
04-09 152
//兼容浏览器的获取指定元素（elem）的样式属性（name）的方法 function getStyle(elem, name){ //如果属性存在于style[]中，直接取 if(elem.style[name]){ return elem.style[name]; } //否则 尝试IE的方法 else if(elem.currentStyl...
封装getStyle （获取样式currentStyle getComputedStyle兼容处理）
weixin_33805743的博客
03-06 151
<script type="text/javascript">//哪个元素//哪个样式 function getStyle(obj, attr){if(obj.currentStyle)//在火狐中为alert(obj.currenStyle)为undefined是假 假的话就会执行else中{return obj.currentStyle[attr];//ie支持}el...
通过prop方法获取和设置元素属性
缘 源 园
04-10 891
prop方法的使用 可以使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。 示例代码: <style> .a01{ color:red; } </style> <script> $(function(){ var $a = $("#link01"); var $input = $('#input01') // 获取元素属性
js兼容方法：获取当前样式|计算后样式 getStyle
dk8600的博客
01-18 105
function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; }...
函数 getStyle() 获取元素 CSS 样式
kaikai4的专栏
07-20 4133
element.style.backgroundColor = '#000'; 然而，很多时候我们在修改元素的样式之前要先保留元素原来的样式属性值，或许可以这么做：  var bc = element.style.backgroundColor; 这么做有可能获取到element元素的background-color属性值，但是，在多数情况下获取到的确实 'undef
js获取某元素的class里面的css属性值代码
10-26
在提供的代码示例中，定义了一个名为`getStyle`的函数，该函数接受两个参数：`obj`表示目标元素，`attr`表示要获取的CSS属性名。函数首先通过`currentStyle`属性（IE特有）或`getComputedStyle`方法（现代浏览器支持...
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
01-19
要想获取HTML元素的计算样式一直都存在很多的兼容问题，各浏览器都会存在一些差异，Firefox、webkit(Chrome,Safari)支持W3C标准的方法：getComputedStyle()，而IE6/7/8不支持标准的方法但是有私有的属性来实现：...
Javascript获取CSS伪元素属性的实现代码
10-25
上述代码首先使用document.querySelector方法选取指定的元素，然后通过window.getComputedStyle获取该元素的伪元素:before的样式对象，最后调用getPropertyValue方法获取颜色属性值。 除了window.getComputedStyle...
javascript脚本化CSS系列和封装兼容方法的getStyle(obj, prop)方法
翾的博客
12-06 776
脚本化CSS读写元素 dom.style.prop 可读写行间样式, 没有兼容性问题, 碰到float这样的关键字属性, 前面应加CSS eg: float—>cssFloat 复合属性必须拆解, 组合单词变成小驼峰式写法 写入的值必须是字符串格式 查询计算样式 window.getComputedStyle(ele, null); eg : window.getComputedStyle(el
封装一个兼容性方法getOrSetStyle()，用来获取或设置样式
滕安超的博客
11-28 388
封装一个兼容性方法getOrSetStyle()，用来获取或设置样式。 操作css有四种方式：三种常见操作（行间样式，内联样式，外联样式），第四种是脚本化css，看似很高大尚，其实就是间接的操作css。getOrSetStyle方法就是用来脚本化css的。前提是要搞懂以下三部分知识点： 1.什么是dom.style.prop？ 答：这是用来读/写css行间样式的，没有兼容性问题，如果碰到像flo...
函数获取css样式 windowgetComputedStyle(elem,null)/window.currentStyle[prop]
koukou0419的博客
06-02 483
一. dom.style.prop//可读可写，但是说只获取和改变行间的样式，外部的都获取不到 //复合属性需要写成小驼峰式 div.style.backgrondColor="red"; //JS给某元素修改样式 1.div.style.width="100px";修改行间样（优化差） 2.div.className="demo";//动态添加切换cl...
获取对象样式属性函数getStyle()
10-03 2002
function getStyle(elem, styleName){ if(elem.style[styleName]){ //获取内联样式 return elem.style[styleName]; } else if(elem.currentStyle){ //IE特有的属性 return e...
JS获取外部的样式：currentStyle属性和getComputedStyle属性 .JQ的attr（）及prop()
The limits of your knowledge are the limits of your world
03-27 623
currentStyle属性和getComputedStyle属性不能设置属性,只能获取 1.兼容IE,不兼容火狐和谷歌 语法：ele.currentStyle[“attr”]或者ele.currentStyle.attr; 2.getComputedStyle:该属性是兼容火狐谷歌,不兼容IE 语法：window.getComputedStyle(ele,null)[attr]获取是window...
JS.elementGetStyle(element, style)
平台产品，架构设计的个人遐想
09-24 936
function elementGetStyle(element, style) {     var value = null;     if (element.style) {     value = element.style[style];     }     if (!value) {       if (document.defaultView && document.def
getStyle 获取元素所绑定的css属性
weixin_34067980的博客
10-15 133
2019独角兽企业重金招聘Python工程师标准>>> ...
前端常用兼容性写法
haishangfeie的博客
08-28 1702
学习前端也有一段时间了，现尝试将我学到的兼容性写法整理一下，与大家分享。 这里主要是分享JavaScript的兼容性写法，涉及CSS3、HTML5的兼容性写法，共享了优雅降级的JS文件html5shiv.min.js的百度云连接。
关于使用getElement获取元素后无法取到具体style的解决方式
qq_35590165的博客
05-15 2371
在我们使用getElementById 或者getElementByClassName获取元素的样式的时候。发现只要不是在元素的内联样式，获取到的style都为空。 这时候我们就需要用到一个js的原生函数getComputedStyle() document.defaultView.getComputedStyle(element[,pseudo-element]); 或者 window.getComputedStyle(element[,pseudo-element]); 这个函数...
javascript function getStyle()样式取值兼容方法
骑着猪猪去拍拖
06-08 1892
function getStyle(obj,styleName){ if(obj.currentStyle){ return obj.currentStyle[styleName]; }else{ return getComputedStyle(obj,null)[styleName]; } } 使用：parseInt(getSty
CSS继承属性详解与示例
"CSS属性继承" 在CSS（层叠样式表）中，...在给定的代码片段中，虽然没有具体的样式定义，但通过`getStyle`函数和`getElementById`方法，可以看出是在尝试获取元素的`color`属性值，这正是继承机制的一个应用实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值