【行间样式获取】

<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. UVA10305 拓扑排序

    网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=117863#problem/B 思路分析:裸的拓扑排序,注释在代码中. 代码: #i ...

  2. 对于JavaScript对象的prototype和__proto__的理解

    一.Object和Function的关系: 刚学JavaScript的时候,看书上说JavaScript中万物皆对象,而javascript中的其他对象都是从Object继承而来,包括内置对象.瞬间觉 ...

  3. SpringSource Tools Suite 字体偏小问题

    参照了Eclipse小技巧收录http://liuzidong.iteye.com/blog/1320094 发现没有找到相应文件,只有搜索了,一个一个地找,总算找到了,修改方法还是一样,只是路径,文 ...

  4. 给EcStore商城会员添加推广返利功能

    EcStore商城后台应用中心安装“网站推广”应用,会员成为推广员有二种途径:一是后台/推广设置/推广员审核/推广注册模式设为:需注册后审核成为推广员 此模式下前台会员在使用推广前,需要在会员中心申请 ...

  5. Turbo Sort Add problem to Todo list Problem code: TSORT

    def heap_sort(ary): n = len(ary) first = int(n / 2 - 1) for start in range(first, -1, -1): # 3~0 rev ...

  6. bower解决js库的依赖管理

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  7. [Codeforces Round #247 (Div. 2)] A. Black Square

    A. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  8. BZOJ 1977 次小生成树（最近公共祖先）

    题意:求一棵树的严格次小生成树,即权值严格大于最小生成树且权值最小的生成树. 先求最小生成树,对于每个不在树中的边,取两点间路径的信息,如果这条边的权值等于路径中的权值最大值,那就删掉路径中的次大值, ...

  9. 《Programming WPF》翻译 第9章 4.模板

    原文:<Programming WPF>翻译 第9章 4.模板 对一个自定义元素最后的设计考虑是,它是如何连接其可视化的.如果一个元素直接从FrameworkElement中派生,这将会适 ...

  10. eclipsecdt添加自动补全功能

    自动代码补全完全是一个改善生活质量的功能呀!cdt拥有自动代码补全功能,只是我们没有打开而已 1. 绑定快捷方式 1. windows -> preferences ->general-& ...