重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这期内容当中小编将会给大家带来有关使用JavaScript怎么获取并修改CSS样式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
成都网站建设哪家好,找成都创新互联公司!专注于网页设计、成都网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:木屋等众多领域,积累了大量丰富的经验,同时也获得了客户的一致好评!
一、行内元素样式获取:
js获取外部样式
在JS代码中,alert会弹出div元素的width为200px;达到了要获取元素宽度的目的,但是这种简单的方法只适用于获取元素的行内元素样式,并不能获取内部样式和外部样式,在项目中,写入行内元素这种方案并不被大家认同,所以这种方法,只是让大家了解下。
二、非行间样式元素获取:
如果元素样式并非行间样式,利用上面这种方法并不能获取到元素的样式,需要使用另一种方法:
js获取内部部样式
在上面代码中,使用了window.getComputedStyle('元素',null).'样式'
,此方法兼容性:火狐 谷歌 IE9 获取的为计算后的样式,但是这里需要注意的是用此方法获取的值为只读模式,并不能修改,所以用了style.cssText
方式修改了其属性,这里需要注意下书写方式.
三、兼容性:
前段潜规则,凡是好的东西都不能通用,是的,你猜对了,任性的IE并不能使用以上方法,但是IE有自己的方法为currentStyle
,用法一样,就不再赘述了,下面直接写出已经处理兼容的代码如下:
var div = document.getElementById('div'); if (div.currentStyle) { console.log(div.currentStyle.width); }else{ console.log(getComputedStyle(div,null).width); }
方法封装:
function getStyle(obj,name){ if (obj.currentStyle) { return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }
上述就是小编为大家分享的使用JavaScript怎么获取并修改CSS样式了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。