使用JavaScript怎么获取并修改CSS样式

这期内容当中小编将会给大家带来有关使用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样式了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

网站栏目：使用JavaScript怎么获取并修改CSS样式
网页地址：http://jkwzsj.com/article/igidge.html

使用JavaScript怎么获取并修改CSS样式

其他资讯