大家都知道在JavaScript原生操作中获取元素的样式，在实际操作是使用时比较频繁的一件事，这里像大家介绍下获取css样式的方法，希望可以帮助一些需要的人，如果有幸被大牛看到，有更好的办法，欢迎提出！！！

一、 行内元素样式获取：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js获取外部样式</title>
  6. </head>
  7. <body>
  8.     <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>
  9. </body>
  10. <script>
  11.     //获取行间样式
  12.     var div = document.getElementById('div');
  13.     var width = div.style.width;
  14.     alert(width);//200px
  15. </script>
  16. </html>

在JS代码中，alert会弹出div元素的width为200px；达到了要获取元素宽度的目的，但是这种简单的方法只适用于获取元素的行内元素样式，并不能获取内部样式和外部样式，在项目中，写入行内元素这种方案并不被大家认同，所以这种方法，只是让大家了解下。

二、 非行间样式元素获取：

如果元素样式并非行间样式，利用上面这种方法并不能获取到元素的样式，需要使用另一种方法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js获取内部部样式</title>
  6.     <style>
  7.         #div{
  8.             width: 200px;
  9.             height: 200px;
  10.             border:3px solid cyan;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="div""></div>
  16. </body>
  17. <script>
  18.     var div = document.getElementById('div');
  19.     //获取div的width
  20.     var width = window.getComputedStyle(div,null).width;
  21.     alert(width);//200px
  22.     //修改div的width
  23.     div.style.cssText='width:300px;'
  24. </script>
  25. </html>

在上面代码中，使用了window.getComputedStyle('元素',null).'样式',此方法兼容性:火狐 谷歌 IE9 获取的为计算后的样式,但是这里需要注意的是用此方法获取的值为只读模式,并不能修改,所以用了style.cssText方式修改了其属性,这里需要注意下书写方式.

三 、兼容性:

前段潜规则,凡是好的东西都不能通用,是的,你猜对了,任性的IE并不能使用以上方法,但是IE有自己的方法为currentStyle,用法一样,就不再赘述了,下面直接写出已经处理兼容的代码如下:

  1. var div = document.getElementById('div');
  2. if (div.currentStyle) {
  3.     console.log(div.currentStyle.width);
  4. }else{
  5. 　　console.log(getComputedStyle(div,null).width);
  6. }

方法封装:

  1. function getStyle(obj,name){
  2.     if (obj.currentStyle) {
  3.         return obj.currentStyle[name];
  4.     }else{
  5.         return getComputedStyle(obj,false)[name];
  6.     }
  7. }

原生JS获取HTML样式并修改的更多相关文章

  1. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  2. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  3. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  4. 原生js获取display属性注意事项

    原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...

  5. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  6. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  7. js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...

  8. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  9. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

随机推荐

  1. jvm 配置，看看

    http://my.oschina.net/qiangzigege/blog/661757

  2. javascript alert,confirm,prompt弹框用法

    1. alert是弹出警告框,在文本里面加入\n就可以换行. 2. confirm弹出确认框,会返回布尔值,通过这个值可以判断点击时确认还是取消.true表示点击了确认,false表示点击了取消. 3 ...

  3. 单位冲击响应与频响以及FIR实现代码（C语言）（转）

    源:FIR数字滤波器C语言 1.单位冲击响应与频响 就如同之前所说的一样,使用下图所示的单位冲击响应,所设计的滤波器,是无法实现的. 现在,让我们看看其这个滤波器的频响.所谓频响,就是计算其单位冲击响 ...

  4. java.lang.UnsupportedClassVersionError: com/T : Unsupported major.minor version问题解决

    编译的时候jdk版本为1.8 2.运行的时候jdk版本为1.7 解决办法:将编译的jdk版本降为1.7,问题解决

  5. 从字符串拼接看JS优化原则

    来自知乎的问题:JavaScript 怎样高效拼接字符串? 请把以下用于连接字符串的JavaScript代码修改为更高效的方式: var htmlString ='< div class=”co ...

  6. mongodb学习(三) 安装和基本CRUD

    菜鸟啊...先吐槽一下自己 发现mongodb已经升级到2.6标准版了.  服务端最新安装方法: http://www.cnblogs.com/lzrabbit/p/3682510.html 一 准备 ...

  7. 使用UTF8-CPP转换unicode编码 附录：UTF8和UTF16和UTF32和Unicode编码

    本文用于解决如何用C++处理字符串的编码格式.本文采用的是成熟便捷的UTF8库来处理这个问题.首先是下载UTF8库,网址为:http://utfcpp.sourceforge.net/ 为了方便后续使 ...

  8. 10.TCP连接的建立与终止

      1.建立连接协议 (1)请求端发送一个SYN段指明客户打算连接的服务器的端口,移机初始序号ISN.这个SYN段为报文段1. (2)服务器发回包含服务器的初始序号的SYN报文段作为应答.同时,将确认 ...

  9. ceentos5.5 配置samba服务&用户&组

    准备 Change Root Password passwd root 在提示下建立新密码 静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0  #网络 ...

  10. OC字符串的使用（一）

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...