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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
js函数调用常用方法详解
Dec 03 Javascript
js实现的map方法示例代码
Jan 13 Javascript
JS简单计算器实例
Jan 20 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
python 运算符 供重载参考
2009/06/11 Python
Python pickle模块用法实例
2015/04/14 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python高斯消除矩阵
2019/01/02 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
毕业自荐信
2013/12/16 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
县委务虚会发言材料
2014/10/20 职场文书
写给同事的离职感言
2015/08/04 职场文书
python批量创建变量并赋值操作
2021/06/03 Python