【行间样式获取】

<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. （二）CodeMirror - 配置项

    theme: string theme:'monokai' 引入对应的css, <link rel="stylesheet" href="../theme/mono ...

  2. HDU 5903 - Square Distance [ DP ] ( BestCoder Round #87 1002 )

    题意: 给一个字符串t ,求与这个序列刚好有m个位置字符不同的由两个相同的串拼接起来的字符串 s, 要求字典序最小的答案    分析: 把字符串折半,分成0 - n/2-1 和 n/2 - n-1 d ...

  3. CODEVS 1066/洛谷 P1514引水入城

    1066 引水入城 2010年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 在一个遥远的国 ...

  4. C++ BitArray 引用计数实现

    #ifndef __BITARRAY__ //数组不支持多线程同时访问,没有对引用计数以及分配的资源做任何锁处理 #define __BITARRAY__ 1 //越界访问修改为抛出异常 #ifdef ...

  5. python3.4入门——核心数据类型

    变量.对象和引用 变量的创建:一个变量(即变量名,如a),当代码第一次给它赋值就创建了它. 变量类型:变量没有任何和它关联的类型信息约束.类型的概念存在于对象中,而不是变量名中.变量原本是通用的,只是 ...

  6. 文件:因为懂你，所以永恒 - 零基础入门学习Python028

    文件:因为懂你,所以永恒 让编程改变世界 Change the world by program 因为懂你,所以永恒 大多数的程序都遵循着:输入->处理->输出的模型,首先接受输入数据,然 ...

  7. Labeling Balls--poj3687

    Labeling Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12273   Accepted: 3516 D ...

  8. c++第三天

    今天完成的事情: [主线] 1.复习了一下昨天的内容 while(std::cin >> value) 扫描[标准输入] 2.在网上下载Sales_item.h 代码如下 #ifndef ...

  9. iOS中3种正则表达式的使用与比较－备

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: ? 1 2 3 4 NSString *email ＝ @“nijino_saki@163.com”:  NSString *regex ...

  10. 【转】各个层次的gcc警告 #pragma GCC diagnostic ignored "-Wunused-parameter" --不错

    原文网址:http://blog.csdn.net/lizzywu/article/details/9419145 各个层次的gcc警告从上到下覆盖 变量(代码)级:指定某个变量警告 int a __ ...