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 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
js数组去重的方法汇总
Jul 29 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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
十天学会php之第七天
2006/10/09 PHP
信用卡效验程序
2006/10/09 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
jquery 快速回到页首的方法
2013/12/05 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
Python os模块学习笔记
2015/06/21 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
python线程中的同步问题及解决方法
2019/08/29 Python
NumPy排序的实现
2020/01/21 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python求解汉诺塔游戏
2020/07/09 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
公司员工的自我评价范例
2013/11/01 职场文书
物业保安辞职信
2015/05/12 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL