我之前学到的getelementbyidgetelementsbytagame

第一个只能得到#id名字的标签当做对象

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

第二个可以得到标签名字tagname的标签当做对象进行操作

当然还有getatrribute()可以得到自定义的属性

比如 一个对象odiv.zzz=1 这个对象zzz这个属性是自定义的 用打点调用的方法肯定不能试用,所以必须要用odiv.getattribute(“zzz”)用这种方法可以得到1这个value

前两种方法得到的element元素都只能获取行内style属性的样式,而不能获取外联样式表和内联样式表中的样式。接下来DOM提供了一个很好的API就是window.getcomputerStyle

()这个API 可以返回一个样式对象接着用getpropertyValue(“”)可以获取样式表的中的style得到计算机计算后的样式并且返回

写法window.getComputedStyle(oDiv).getPropertyValue("width")——引号内的不为驼峰写法

Get得到 computer 计算 style 样式 property 属性 value

Window可以省略!并且getpropertyvalue也可以省略

写法为getcomputerstyleoDiV[“padding-left”]

以上的写法只有高级浏览器chrome兼容

但是以上的写法在IE678是不兼容的。在IE678的写法如下

如果想得到元素的内联样式或者外联样式表的计算后样式

oDiv.CurrentStyle.width

oDiv.currentstyle.paddingLeft

oDiv.currentstyle[paddingLeft];

这种写法只有在以上版本才使用可以返回computerstyle

注释:但是因为是低级浏览器 所以颜色不会用rgb的方法显示,被文字撑出的高度先不能显示高度而是显示auto

_______________________________________________________________________

 

考虑到兼容性问题,我首先想到的是<!--[if lte IE 8]>.....<![endif]>用这种方法解决,但是这种写法封装起来很复杂,不如直接造一个轮子,就是一个函数,可以直接把一个对象的一个想要得到的属性得到的一个函数(fetch得到)

Function fetchcomputerstyleobjproperty{

//obj代表一个对象,property代表一个想要得到的属性

Ifwindow.getcomputerstyle{

//这是判断是否是高级浏览器,不要求驼峰写法,所以需要验证是否为-写法

property = property.replace(/([A-Z])/g,function(match,$1){

return “-” + $1.toLowercase()});

return getcomputerstyle(obj)[property];

}else {

//这种情况是低版本浏览器,针对IE678的获取元素

Property = property.replace(/(\-[\w])/g,function(match,$1){

Return $1.toUppercase();})

Return obj.currentstyle[property];

}

上面的fetchcomputerstyle函数就是一个可以在任何浏览器获取外联样式,内联样式得到对象的属性值。

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄