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

最新推荐文章于 2021-04-10 09:21:52 发布
最新推荐文章于 2021-04-10 09:21:52 发布
阅读量303 收藏
点赞数
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];
 			}
 }
有关getAttribute()方法和setAttribute()方法的说明
helanye的专栏
07-21 3万+
js getAttribute()方法●一份文档就是一棵节点树。   ●节点分为不同的类型：元素节点、属性节点和文本节点等。   ●getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。   ●getElementsByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。   ●这些节点中的每个都是一个对象。
兼容浏览器的获取指定元素（elem）的样式属性（name）的方法
weixin_34150830的博客
04-09 154
//兼容浏览器的获取指定元素（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 152
<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 106
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 777
脚本化CSS读写元素 dom.style.prop 可读写行间样式, 没有兼容性问题, 碰到float这样的关键字属性, 前面应加CSS eg: float—>cssFloat 复合属性必须拆解, 组合单词变成小驼峰式写法 写入的值必须是字符串格式 查询计算样式 window.getComputedStyle(ele, null); eg : window.getComputedStyle(el
封装一个兼容性方法getOrSetStyle()，用来获取或设置样式
滕安超的博客
11-28 390
封装一个兼容性方法getOrSetStyle()，用来获取或设置样式。 操作css有四种方式：三种常见操作（行间样式，内联样式，外联样式），第四种是脚本化css，看似很高大尚，其实就是间接的操作css。getOrSetStyle方法就是用来脚本化css的。前提是要搞懂以下三部分知识点： 1.什么是dom.style.prop？ 答：这是用来读/写css行间样式的，没有兼容性问题，如果碰到像flo...
函数获取css样式 windowgetComputedStyle(elem,null)/window.currentStyle[prop]
koukou0419的博客
06-02 484
一. dom.style.prop//可读可写，但是说只获取和改变行间的样式，外部的都获取不到 //复合属性需要写成小驼峰式 div.style.backgrondColor="red"; //JS给某元素修改样式 1.div.style.width="100px";修改行间样（优化差） 2.div.className="demo";//动态添加切换cl...
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...
在IE11和Firefox下attr和prop的兼容性问题（IE低版本和google没有问题）
无所谓
02-04 6695
最近工作中遇到一个比较棘手的兼容性问题，下面就分享一下解决过程吧 背景说明： 左边一个文本框，右边一个下拉框，下拉框显示从数据库取出来的数据，功能要求左边的文本框输入右边下拉框的value值，下拉框自动定位到 对应的数据，如果输入的值下拉框没有，则返回到为空的状态 ■现象 使用jquery语句$(this).attr('selected',true)进行选中设置，文本框输入value值，
window.getComputedStyle()方法的使用及其扩展
weixin_30294021的博客
04-28 677
1.window.getComputedStyle()方法返回值 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 语法：var style = window.getComputedStyle("元素", "伪类"); //第二个参数选填 如果不查询伪类的话可以不填或填nul...
妙味——封装getStyle()获取样式
weixin_30381793的博客
11-24 120
　　针对在不同浏览器下获取计算后的样式值封装一个获取样式的函数——getStyle() function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,fa...
JS.elementGetStyle(element, style)
平台产品，架构设计的个人遐想
09-24 937
function elementGetStyle(element, style) {     var value = null;     if (element.style) {     value = element.style[style];     }     if (!value) {       if (document.defaultView && document.def
Jquery 版本兼容 attr("checked") 返回undefined 获取选中失效
ForeverCjl的专栏
10-10 2787
假设我们现在需要这样的场景：页面上有一个checkbox，我们期望通过Jquery来获得它是否选中，或者通过Jquery来让它被选中。 在JQ1.6之前的版本，我们会这样写我们的代码： 'checkbox' id='cb'/>                 //获取是否选中       var isChecked = $('#cb').at
CSS继承属性详解与示例
"CSS属性继承" 在CSS（层叠样式表）中，...在给定的代码片段中，虽然没有具体的样式定义，但通过`getStyle`函数和`getElementById`方法，可以看出是在尝试获取元素的`color`属性值，这正是继承机制的一个应用实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值