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 内存释放问题
Apr 25 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 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和ACCESS写聊天室(七)
2006/10/09 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jquery json 实例代码
2010/12/02 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
高一新生军训感言
2014/03/02 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
师德师风的心得体会
2014/09/02 职场文书
中学生打架检讨书
2014/10/13 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
小学见习报告
2015/06/23 职场文书
《山中访友》教学反思
2016/02/24 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL