JavaScript获取css 行间样式，内连样式和外链样式的方式
【行间样式获取】
<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 行间样式，内连样式和外链样式的方式的更多相关文章
- 重温JavaScript获取CSS样式的方法（兼容各浏览器）
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- JS:操作样式表3：内联和外链样式
var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...
- 使用JavaScript获取CSS伪元素属性
我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 如下 // 获取 .element:before 的 color 值 var color = win ...
- 如何javascript获取css中的样式
obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...
- 原生JavaScript获取css样式
访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...
- javascript获取css中的样式值
<body> <input type="button" id="btn" value="启动"/> <img ...
- JavaScript 获取CSS媒体查询信息
var result = window.matchMedia('(max-width: 700px)'); if (result.matches) { console.log('页面宽度小于等于700 ...
随机推荐
- iOS的触摸事件
在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件,我们称其为@''响应者对象''UIApplication,UIViewController,UIView都 ...
- K60的DMA多路脉冲计数
最近在做飞思卡尔的智能车,由于要用到两路脉冲计数,但是由于K60只有3个FTM, 一个分给电机,一个分给舵机,另一个用于正交解码. 所以FTM用不到了,只能另行办法.LPT虽然也可以计数,但是却只能计 ...
- （原+转）ubuntu终端输出彩色文字
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6066697.html 参考网址: http://www.tuicool.com/articles/jI ...
- javascript操作DOM的方法与属性
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...
- struts2 使用jsonplugin
配置中的参数含义: root参数用于指定要序列化的根对象,如果省去这一配置,表示要序列化action中的所有属性 ignoreHierarchy 为false时表示要序列化根对象的所有基类 exclu ...
- [Mugeda HTML5技术教程之13]链接的添加方式
在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接 就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...
- [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容
1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...
- 关于String s = new String("xyz"); 创建几个对象的问题
引用自这位朋友:http://blog.sina.com.cn/s/blog_6a6b14100100zn6r.html 你知道在java中除了8中基本类型外,其他的都是类对象以及其引用.所以 &qu ...
- win7自由调整CMD窗口
有如下命令,只需要改动相关参数即可以任意改变cmd窗口大小. mode con lines= mode con cols= color cls @cmd
- 为GridView中的DropDownList赋值
<Bda:GridView ID="gvMessage" runat="server" Height="70px" Width=&qu ...