JavaScript获取css 行间样式，内连样式和外链样式的方式
【行间样式获取】
<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获取CSS样式的方法（兼容各浏览器）
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- JS:操作样式表3：内联和外链样式
var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...
- 使用JavaScript获取CSS伪元素属性
我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 如下 // 获取 .element:before 的 color 值 var color = win ...
- 如何javascript获取css中的样式
obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...
- 原生JavaScript获取css样式
访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...
- javascript获取css中的样式值
<body> <input type="button" id="btn" value="启动"/> <img ...
- JavaScript 获取CSS媒体查询信息
var result = window.matchMedia('(max-width: 700px)'); if (result.matches) { console.log('页面宽度小于等于700 ...
随机推荐
- C#中的表达式树的浅解
表达式树可以说是Linq的核心之一,为什么是Linq的核心之一呢?因为表达式树使得c#不再是仅仅能编译成IL,我们可以通过c#生成一个表达式树,将结果作为一个中间格式,在将其转换成目标平台上的本机语言 ...
- DTO学习系列之AutoMapper（四）
本篇目录: Mapping Inheritance-映射继承 Queryable Extensions (LINQ)-扩展查询表达式 Configuration-配置 Conditional Mapp ...
- hdu 确定比赛名次
算法:拓扑排序 题意:有一个比赛,现在知道很多队之间的关系:让你去让确定比赛排名: Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,... ...
- 对话框(alert,prompt，confirm,showModalDialog)
alert大部分浏览器中会产生阻塞,confirm,prompt都会产生阻塞 关于showModalDialog的介绍:(转自JS中showModalDialog 详细使用) 基本介绍: ...
- EL表达式取整
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 1. <fm ...
- Python核心编程(第七章)--映像和集合类型
字典:它是一个容器类型,能存储任意个数的Python对象,也包括其他容器类型,Python的字典是作为可变的哈希表实现的 映像类型中的数据是无序排列的 可以用工厂方法dict()来创建字典,也可以 ...
- 给div中动态添加节点并设置样式
前端IOS今天需要动态的在图片前面添加一个按钮 主要是在使用 bt.setAttribute("class","aaa"); 可以对创建的节点使用setAttr ...
- 什么是dtd文件，为什么需要dtd
DTD为英文Document Type Definition,中文意思为"文档类定义".DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码.也许 ...
- LeetCode_Word Search
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...
- Network Attack
Network Attack Nicola regularly inspects the local networks for security issues. He uses a smart and ...