原文:JavaScript如何获取css属性

　　在web开发中，很多时候我们需要用JavaScript对网页的样式进行修改，接下来，我们就来看一下我们该如何访问css属性，针对不同情况及案例来进行分析。

情况一：css属性位于html标签内

　　在实际开发过程中，如果样式表的内容比较少的话，我们通常将css属性封装在html标签中，这时JavaScript访问css属性很直接，通过访问html标签的style属性，修改具体的样式即可完成相应的操作。

　　例如：

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>styleTest</title>

 </head>

 <body>

 <div style="width: 200px;height: 200px; background: green;" id="mydiv"></div>

 <input type="button" value="test" onclick="test()">

 <script type=text/javascript>

     function test(){

         var mydiv=document.getElementById('mydiv');

         mydiv.style.background="red";         // id.style.属性 执行相应的操作

     }

 </script>

 </body>

 </html>

　　上述案例通过点击按钮，改变对应div的背景颜色。

情况二：css属性在其他文件中

　　当css样式表不在html文件中，我们通常会在头部引入css文件名，此时。此时如果我们使用情况一的方法访问，则会发现失败。原因就是此时相应的标签没有style这个属性了，如果我们查看对应标签的style时，会发现是undefined。所以我们需要使用新的方法来访问其属性，网上的方法有很多，在这里我给出我所使用的方法。并给出相应的解释，希望能帮助到大家。

　　首先取得定义类的样式表的引用，用document.styleSheet集合实现这个目的，这个集合包含HTML页面中所以的样式表，DOM为每个样式表定义一个CSSRules的集合，这个集合中包含定义在样式表中的所用css规则 (注意:Mozilla和Safari中是cssRules，IE中是rules)。

　　具体如下：

　　第①步：

　　　　访问获取css文件　( [0] 表示获取的引入的第一个css文件)

 var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules；     // 兼容不同浏览器

　　第②步：

　　　　获取指定的css属性  ( [0] 表示css文件中的第一个标签的css样式 )

 var style1=icssrules[0];

　　第③步：

　　　　执行相应操作

 style1.style.background="red";

详细代码如下：

　　html文件：

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>styleTest</title>

     <link rel="stylesheet" href="style.css">

 </head>

 <body>

 <div id="mydiv"></div>

 <input type="button" value="test" onclick="test()">

 <script type=text/javascript>

     function test(){

         var mydiv=document.getElementById('mydiv');

         var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;

         var style1=icssrules[0];

         style1.style.backgroundColor="red";

     }

 </script>

 </body>

 </html>

　　外部css文件：

 #mydiv {

     width: 200px;

     height: 200px;

     background: green;

 }

　　实际效果截图如下：

　　点击前：

　

　　点击后：

　　通过两种方式，可以修改相应的css样式表。针对不同的情况可以借鉴不同的方法。

JavaScript如何获取css属性的更多相关文章

  1. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  2. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  3. 自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性

    01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...

  4. js原生获取css属性

    原文参考http://blog.csdn.net/lzding/article/details/46317777 1.写在dom上的属性,内联样式 <div id="box" ...

  5. JS使用getComputedStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...

  6. JavaScript中的CSS属性对照表

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-c ...

  7. javascript之复习(css属性值的计算)

    js取div的宽高咋办,css有content-box,border-box,padding-box,表现又不一样.好在有个offsetWidth, <style type="text ...

  8. JS 获取CSS属性值

    obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...

  9. getComputedStyle获取css属性与IE下的currentStyle获取到的值不同

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

随机推荐

  1. datatables定义列宽自适应方法

    不同的分辨率以及浏览器自适应,列表不出现滚动条,表格内容自动换行. 方法:通过定义表格列属性,结合<table>CSS样式和定义的列单元格样式 'td_huanhang'/'td_unhu ...

  2. 程序员带你学习安卓开发，十天快速入-对比C#学习java语法

    关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到 ...

  3. .NET生成PDF文件

    C#未借助第三方组件,自己封装通用类,生成PDF文件. 调用方式: //路径 string path = @"C:\yuannwu22.pdf"; //内容 string strC ...

  4. Codeforces Round #310 (Div. 2)--B

    http://codeforces.com/problemset/problem/556/B 题意:给定n个数字且都小于n,然后每次循环第2k+1个数字+1,第2k个数字减一,k=0,1,2...n/ ...

  5. xml--小结④DTD的验证问题，不要用IE检验，IE不靠谱

    可以自己写代码 <script type="text/javascript"> var xmldoc = new ActiveXObject("Microso ...

  6. SQL 中case when then else 用法

    SQL如下: SELECT DISTINCTsy_haken_type,sy_sagyo_type,sy_kokyaku_cdFROm tbl_syukeiWHERE (sy_sagyo_ymd be ...

  7. 样式优先级、margin

    margin:上 左 下 右:

  8. SOCKET，TCP/UDP,HTTP,FTP

    (一)TCP/UDP,SOCKET,HTTP,FTP简析 TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层: 网络层:IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议 传 ...

  9. Android更新UI的两种方法——handler与runOnUiThread()

    在Android开发过程中,常需要更新界面的UI.而更新UI是要主线程来更新的,即UI线程更新.如果在主线线程之外的线程中直接更新页面 显示常会报错.抛出异常:android.view.ViewRoo ...

  10. ACM YTU 十进制与八进制的转换 (栈和队列) STL栈调用

    十进制与八进制的转换(栈和队列) Description 对于输入的任意一个非负十进制整数,利用栈打印输出与其等值的八进制数. Input 111 Output 157 Sample Input 14 ...