【行间样式获取】

<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. 洛谷 P3397 地毯

    P3397 地毯 题目背景 此题约为NOIP提高组Day2T1难度. 题目描述 在n*n的格子上有m个地毯. 给出这些地毯的信息,问每个点被多少个地毯覆盖. 输入输出格式 输入格式: 第一行,两个正整 ...

  2. show_space/get_alert_log/get_trace_file

    1.get_alert_log 获取alert文件的路径和名称 set serveroutput on        --设置输出,让sqlplus在屏幕上可以输出.(要加入到login.sql中!) ...

  3. javax.net.ssl.SSLException: java.lang.UnsupportedOperationException

    Loading KeyStore C:\Tool\jdk1.7.0_71\jre\lib\security\jssecacerts... Opening connection to www.googl ...

  4. Honkly分享链接集总篇

    VC6.0 Filetool Honkly版         http://pan.baidu.com/s/1bnentr5 密码:15eq,解压密码:honkly VC6.0 Filetool 官方 ...

  5. oracle starup报错

    今天在linux里面安装Oracle的时候出现一个报错,忽略报错安装之后,数据库启动的时候报错: 从网上找到的解决方法: 创建实例后,进入sqlplus启动报错: sqlplus / as sysdb ...

  6. hdu 3191 How Many Paths Are There

    http://acm.hdu.edu.cn/showproblem.php?pid=3191 这道题求次短路经和路径数 #include <cstdio> #include <cst ...

  7. Thinkpad E430+CentOS 6.4+ linux-3.10.12内核网卡驱动（无线+有线）配置

    配置并编译安装内核模块和内核后,解压附件 firmware.tar.bz2,拷贝其中的rtlwifi文件夹到/lib/firmware下,然后 执行装载内核模块命令: sudo modprobe rt ...

  8. Linux Java的环境变量搭建

    JAVA JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载完后,解压完并将其中的jdk文件夹移动到/u ...

  9. Android学习笔记__1__Android体系架构

    Android 体系结构图 Android作为一个移动设备的平台,其软件层次结构包括了一个操作系统(OS),中间件(MiddleWare)和应用程序(Application).根据Android的软件 ...

  10. execl csv导出

    方维js方法:function export_csv() { var inputs = $(".search_row").find("input:[type!='chec ...