css 样式分为行内样式和 外部样式:

1、javascript 获得行内样式 :

可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", 需要使用驼峰方法,例如 background-color 改为 backgroundColor);

2、javascript 获得外部样式 ( getComputedStyle 可以获得style 的值也可以获得外部样式表的css)

获得外部样式可以使用浏览器提供的 "window.getComputedStyle( ele,null )"  这里的ele 就是需要操作的对象,第二个参数是指定一个伪元素匹配,常规的元素用不上,直接使用null.

但是这个getComputedStyle 并不支持IE9 以下的浏览器,但是ie 他有自己支持的方法: ele.currentStyle;

所以为了达到兼容的问题,我们可以自己写好一个通用的函数:

// html 部分

<style>

   .getdivstyle{

    background: red;

   }

 </style>

 <div id="js-getdivstyle"  class="getdivstyle" style="width:300px;height:300px;">测试</div>

// javascript 部分

<script>

 // js调用部分

 var getDivStyle = getId("js-getdivstyle");

 getStyle( getDivStyle, "width");

 getStyle( getDivStyle, "background-color"); // 这里的属性选择驼峰或者是默认加“-”的属性都可以,但是不能直接使用缩写 “background”

 // 封装好的获取样式函数 

 function getStyle(obj,attr){

  if(window.getComputedStyle){

   return window.getComputedStyle(obj,null)[attr];

  }else{

   return obj.currentStyle[attr];

  }

 }

 // 封装好的获取元素id

 function getId(idName){

  return document.getElementById(idName);

 }

</script>

题外话

ele.style.属性名 和 ele.cssText 以及 getComputedStyle(obj,null)  有什么区别

1、ele.style.属性名  这里获得的style 可以获得属性值,也可以设置修改他, 例如: ele.style.left = 10 + "px";

2、ele.cssText 其实跟style差不多,只不过它是获得多个css样式。例如 : ele.style.cssText = "font-size:16px; height:250px"   也是生成在行内样式中。

3、 getComputedStyle(obj,null) 只能获取值不能修改,并且返回的css是一个 CSSStyleDeclaration 对象集合。详细见: https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration

原生javascript 获得css样式有几种方法?的更多相关文章

  1. 【javascript】原生js更改css样式的两种方式

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

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

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

  3. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  4. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  5. HTML引入CSS样式的四种方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式          行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...

  6. 使用CSS样式的三种方法

    一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...

  7. 原生JavaScript获取css样式

    访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...

  8. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  9. HTML页面中插入CSS样式的三种方法

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...

随机推荐

  1. Intel 被 ARM 逼急了

    英特尔最近推出基于Silvermont架构Bay Trail系列处理器,相对前一代Bonnell架构的最突出的改进就是支持乱序执行 silvermon架构的处理器将出现在pc,平板等: List of ...

  2. zabbix监控应用连接数

    zabbix使用用户自定义键值来监控应用系统连接数: 1.修改配置文件zabbix_agentd.conf 格式: UserParameter=<key>,<shell comman ...

  3. CentOS7--64安装python的psutil模块

    1.以root身份登陆CentOS依次 执行以下命令: wget https://pypi.python.org/packages/source/p/psutil/psutil-2.1.3.tar.g ...

  4. jstl经典用法

    jstl的forEach使用和set变量实现自增: <body> <c:set var="index" value="0" /> < ...

  5. GCC下32位与64位机器类型变量所占字节数

    GCC下32位与64位机器类型变量所占字节数 在C语言中,编译器一般根据自身硬件针对类型变量来选择合适的字节大小,下面列举一下在GCC编译器下32位机器与64位机器各个类型变量所占字节数目: C语言 ...

  6. css单位rem---移动端至宝

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大 家一定会想起em单位em(font  ...

  7. AngularJs练习Demo13Provider_factory

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  8. EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理

    EasyUi中的DataGrid提供前台编辑的相关函数. 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉及到DataGrid ...

  9. Slony-I双机备份

    测试环境:postgresql 9.3.5,slony-I2.2.3(application stack builder提供)以下参考网上教程亲自测试总结 ---------------------- ...

  10. CSS特殊性

    样式的优先级取决于特殊性,特殊性为0,0,0,0 Ø每个元素或伪元素选择器贡献特殊性为 0,0,0,1 Ø每个类.伪类或者属性选择器的特殊性为 0,0,1,0 Ø每个ID选择器的特殊性为 0,1,0, ...