【行间样式获取】

<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. 抽空通过简书网学习了一下console，感觉高大上！

    抽空看了一下简书中关于console的文章,为了便于自己今后查看,自己写了一遍!原文地址:http://www.jianshu.com/p/f961e1a03a56 测试代码在最下面 1.consol ...

  2. 方法覆盖（override）”的要点

    方法覆盖要求子类与父类的方法一模一样,否则就是方法重载(overload)!请自行编写代码测试以下特性:在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 结论:          在“ ...

  3. hdu 5586 sum

    Problem Description There is a number sequence A1,A2....An,you can select a interval [l,r] or not,al ...

  4. C++中的int和short int

    #include <iostream> #include <string> #include <cstring> //strcpy #include <cst ...

  5. 改变HTML中超链接的显示样式

    更详细的内容请参考:http://www.w3school.com.cn/tags/tag_a.asp HTML中的代码如下: <a class="news_title" t ...

  6. sql 删除两条完全相同的记录

    delete a from ( select *,ps=row_number()over(PARTITION by cCaption  order by getdate()) from AA_Colu ...

  7. Server2008R2:由于没有远程桌面授权服务器可以提供许可证，.....错误的解决 ---设计师零张

    一直使用远程桌面连接一台windows2008server服务器,今天突然报错,连不上了:   “由于没有远程桌面授权服务器可以提供许可证,远程会话被中断.请跟服务器管理员联系.”       由于是 ...

  8. js代码中的parent，top和self有什么区别

    .parent常用在iframe和frame中的子页面访问父页面中的对象 .top :一个页面可能会有很多层,top是指最顶层的框架 .self :是指当前窗口

  9. BZOJ 2298 problem a(区间DP)

    题意:一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相同的分数) 思路:考虑最多有多少人说真,那么答案就是n-max. ai个人分数 ...

  10. LeetCode_Spiral Matrix II

    Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. For ...