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 ...
随机推荐
- jQuery和DOM对象
html示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- 方法覆盖（override）”的要点
方法覆盖要求子类与父类的方法一模一样,否则就是方法重载(overload)!请自行编写代码测试以下特性:在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 结论: 在“ ...
- poj3301 三分
Texas Trip Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4998 Accepted: 1559 Descri ...
- [QT]QT概述
QT概述 基于C++的GUI开发框架,跨平台.Qt 是一个用于桌面系统和嵌入式开发的跨平台应用程序框架. QT是挪威TROLLTECH公司开发的跨平台C++工具,在UNIX下非常出名:他的宗旨是“一次 ...
- [Mugeda HTML5技术教程之15]案例分析：制作移动教育课件
本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法.Mugeda为移动教育领域和移动数字出版领域提供理想的教 ...
- 从类的继承看socketserver源码
当我们拿到一份python源代码,我们要怎么去看呢? 下面我们以socketserver为例,看下面的一段代码: #!/usr/bin/env python # -*- coding: UTF-8 - ...
- mapreduce的基本思想
1.什么是mapreduce mapreduce是hadoop自带的分布式计算框架. 2.mapreduce的基本思想 2.1.能够解决什么问题假设一个场景:一个电商系统,统计某个手机号的用户的上行和 ...
- 元组:戴上了枷锁的列表 - 零基础入门学习Python013
元组:戴上了枷锁的列表 让编程改变世界 Change the world by program 元组:戴上了枷锁的列表 由于和列表是近亲关系,所以元组和列表在实际使用上是非常相似的. 我们这节课主要通 ...
- ubuntu及终端快捷键
1.关于终端的快捷键: Tab:tab键是比较常用的一个快捷键,它的作用是补全文件名或者路径.举例 来说,输入”cd /ho”在按一下tab键,终端里就会显示”cd /home”了.如果您的文件夹下, ...
- Linux下使用VirtualBox安装Windows系统
(文档比较长,只是写的详细,实际操作起来相对简单.) 由于一些特殊原因,我们并不能完全抛下Windows而使用Linux.VirtualBox 是一款虚拟机软件,支持多系统.在Linux下安装 Vir ...