JavaScript获取css行间样式,内连样式和外链样式的简单方法


Posted in Javascript onJuly 18, 2016

【行间样式获取】

<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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
jquery实现提示语淡入效果
May 05 jQuery
js编写选项卡效果
May 23 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 #Javascript
深入分析javascript中的错误处理机制
Jul 17 #Javascript
javascript正则表达式中分组详解
Jul 17 #Javascript
最佳的JavaScript错误处理实践
Jul 16 #Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 #Javascript
js canvas实现擦除动画
Jul 16 #Javascript
微信jssdk用法汇总
Jul 16 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
初品cakephp 入门基础
2012/02/16 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
使用node.js 制作网站前台后台
2014/11/13 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
学Python 3的理由和必要性
2019/11/19 Python
Python基于当前时间批量创建文件
2020/05/07 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Delphi工程师笔试题
2013/09/21 面试题
公司财务流程之主管工作流程
2014/03/03 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
文秘应届生求职信
2014/07/05 职场文书
创新社会管理心得体会
2014/09/12 职场文书
加入学生会自荐书
2015/03/05 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL