UDN-企业互联网技术人气社区

板块导航

浏览  : 734
回复  : 7

[原生js] JavaScript获取css行间样式,内连样式和外链样式的简单方法

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-11 14:09:39 | 显示全部楼层 |阅读模式
  下面小编就为大家带来一篇JavaScript获取css行间样式,内连样式和外链样式的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  【行间样式获取】
  1. <div id='div1' style="backgroud:red">测试</div>   

  2. <script>

  3.   var odiv=document.getElementById('div1');  //先获取到要获取样式的元素标签,也就是获取到div1

  4.   console.log(odiv.style.background);      //这样我们就可以获取到了行间的样式了

  5. </script>
复制代码

  【内连样式获取】
  1. <html>

  2.   <head>

  3.     <style>

  4.       .div2{

  5.         background:red;

  6.         }

  7.     </style>

  8.   </head>

  9.   <body>

  10.     <div id="div1" class="div2">测试</div>

  11.     <script>

  12.       var odiv=document.getElementById('div1');      //先获取到要获取样式的元素标签,也就是获取到div1

  13.       //console.log(getComputedStyle(odiv,null).background);   getComputedStyle("元素","伪类") 是获取到计算后的样式,第二个参数是伪类,如果没有直接使用null  但是万恶的IE8及之前不支持所以需要用到下面的方法

  14.       //console.log(currentStyle.background)  这个只有IE本身支持 也是获取到计算后的样式

  15.      console(window.getComputedStyle?getComputedStyle(odiv,null).background:odiv.currentStyle);      //跨浏览器兼容

  16.     </script>

  17.   </body>

  18. </html>
复制代码

  【外链样式获取】
  1. <html>

  2.   <head>

  3.     <link rel="stylesheet"  type="text/css"  href="basic.css"  />      //外链的样式表

  4.   </head>

  5.   <body>

  6.     <div id="div1" class="div2" >测试</div>

  7.     <script>

  8.       var sheet=document.styleSheets[0]    //获取到外链的样式表

  9.       var rule=sheet.cssRules[0]       //获取到外链样式表中的第一个样式

  10.       console.log(rule.style.background)    //red  这样就可以获得了外链样式表中指定的样式了

  11.     </script>

  12.   </body>

  13. </html>
复制代码

  【外链样式表】
  1. .div2{

  2.   background:red;

  3. }
复制代码

  以上这篇JavaScript获取css行间样式,内连样式和外链样式的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关帖子

发表于 2017-1-11 14:10:08 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2017-1-11 14:10:08 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

发表于 2017-1-11 14:10:08 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

发表于 2017-1-11 14:10:09 | 显示全部楼层
Very Good!
使用道具 举报

回复

发表于 2017-1-11 14:10:10 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部