【行间样式获取】

<div id='div1' style="backgroud:red">测试</div>   

<script>

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

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

</script>

【内连样式获取】

<html>

  <head>

    <style>

      .div2{

        background:red;

        }

    </style>

  </head>

  <body>

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

    <script>

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

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

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

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

    </script>

  </body>

</html>

【外链样式获取】

<html>

  <head>

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

  </head>

  <body>

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

    <script>

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

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

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

    </script>

  </body>

</html>

【外链样式表】

.div2{

  background:red;

}

JavaScript获取css 行间样式,内连样式和外链样式的方式的更多相关文章

  1. 重温JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  2. js获取元素的外链样式

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...

  3. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  4. JS:操作样式表3:内联和外链样式

    var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...

  5. 使用JavaScript获取CSS伪元素属性

    我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 如下 // 获取 .element:before 的 color 值 var color = win ...

  6. 如何javascript获取css中的样式

    obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...

  7. 原生JavaScript获取css样式

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

  8. javascript获取css中的样式值

    <body> <input type="button" id="btn" value="启动"/> <img ...

  9. JavaScript 获取CSS媒体查询信息

    var result = window.matchMedia('(max-width: 700px)'); if (result.matches) { console.log('页面宽度小于等于700 ...

随机推荐

  1. iOS的触摸事件

    在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件,我们称其为@''响应者对象''UIApplication,UIViewController,UIView都 ...

  2. K60的DMA多路脉冲计数

    最近在做飞思卡尔的智能车,由于要用到两路脉冲计数,但是由于K60只有3个FTM, 一个分给电机,一个分给舵机,另一个用于正交解码. 所以FTM用不到了,只能另行办法.LPT虽然也可以计数,但是却只能计 ...

  3. (原+转)ubuntu终端输出彩色文字

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6066697.html 参考网址: http://www.tuicool.com/articles/jI ...

  4. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

  5. struts2 使用jsonplugin

    配置中的参数含义: root参数用于指定要序列化的根对象,如果省去这一配置,表示要序列化action中的所有属性 ignoreHierarchy 为false时表示要序列化根对象的所有基类 exclu ...

  6. [Mugeda HTML5技术教程之13]链接的添加方式

    在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接 就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...

  7. [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容

    1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...

  8. 关于String s = new String("xyz"); 创建几个对象的问题

    引用自这位朋友:http://blog.sina.com.cn/s/blog_6a6b14100100zn6r.html 你知道在java中除了8中基本类型外,其他的都是类对象以及其引用.所以 &qu ...

  9. win7自由调整CMD窗口

    有如下命令,只需要改动相关参数即可以任意改变cmd窗口大小. mode con lines= mode con cols= color cls @cmd

  10. 为GridView中的DropDownList赋值

    <Bda:GridView ID="gvMessage" runat="server" Height="70px" Width=&qu ...