获取css样式,style、getComputedStyle及currentStyle的区别
样式表有三种:
内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的为内嵌样式;
内联样式:
<style>
#box{
font-size: 25px;
background-color: #ccc;
}
</style>
在html页中直接写入<style></style>的为内联样式;
外部样式:<link rel="stylesheet" href="css/style.css" />这种为外部样式。
现在来测试一个小例子:
<style>
#box{
font-size: 25px;
background-color: #ccc;
}
</style>
<div id="box" style="color:red">box</div>
js代码:
window.onload=function(){
var box=document.getElementById('box');
alert(box.style.color); //弹出red element.style[attr]对内嵌样式有效
alert(box.style.fontSize); //弹出空 从这里可以看出element.style[attr]只对内联样式无效
alert(isStyle(box,'color')); //使用isStyle方法,弹出rgb(255,0,0)
alert(isStyle(box,'fontSize')); //使用isStyle方法,弹出25px
} /*通过元素节点和属性获取属性值*/
function isStyle(ele,attr){
if(window.getComputedStyle!='undefined'){ //兼容firefox
return window.getComputedStyle(ele,null)[attr];
}else if(ele.currentStyle!='undefined'){ //兼容IE
return ele.currentStyle[attr];
}
}
要想获取内部样式以及外部样式需要通过getComputedStyle和currentStyle来获取,当然也可以获取内嵌样式。
获取css样式,style、getComputedStyle及currentStyle的区别的更多相关文章
- js操作css样式,null和undefined的区别?
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- js 设置 获取css样式
先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 重温JavaScript获取CSS样式的方法(兼容各浏览器)
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
- js获取css样式方法
一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...
- 为什么我获取不到这个css样式?js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery获取CSS样式中的颜色值的问题
转自:http://blog.csdn.net/cwj649956781/article/details/23261529 jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法,需 ...
随机推荐
- sqoop常用语句
1,列出全部数据库 sqoop list-databases --connect jdbc:sqlserver://10.10.10.2 --username sa --password 1 2,导 ...
- 补档 Codeblocks下的文件标题栏(标签)显示方法
可能在以下链接也能看到这篇文档 我知道很多人都不知道这个到底叫啥,还不如直接一点: 文件标题栏 就是如下的效果. 解决办法: 在左上角第三个view下,打开后取消Hide editor tabs 选项 ...
- GDCM
gdcmconv: gdcm 2.2.4 $Date$ Usage: gdcmconv [OPTION] input.dcm output.dcm Convert a DICOM file int ...
- vue实现进入页面表单聚焦
<input type="text" ref="input"/> <script> mounted(){ this.$refs['inp ...
- python time,random,os,sys,序列化模块
一.time模块 表示时间的三种方式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: (1)时间戳(timestamp) :通常来说,时间戳 ...
- 设计模式学习总结(七)适配器模式(Adapter)
适配器模式主要是通过适配器来实现接口的统一,如要实现国内手机在国外充电,则需要在不同的国家采用不同的适配器来进行兼容! 一.示例展示: 以下例子主要通过给笔记本电脑添加类似手机打电话和发短信的功能来详 ...
- Python学习 day07
一.关于解决问题的思路 1.删除列表中索引为单数的元素. 别人的思路: 利用切片 li = [11, 22, 33, 44, 55] li = li[::2] print(li) 思考:虽然学了pyt ...
- js模拟实现哈希表
在算法中,尤其是有关数组的算法中,哈希表的使用可以很好的解决问题,所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子. 说明: 这篇博客所写并不是真正意义的哈希表,只是与哈希表的使用有相 ...
- 使用jxl读取excel内容,并转换成Json,用于Datagrid
一.上传excel文件,得到InputStream,由InputStream得到Jxl中的Workbook,取出内容,存到二维数组中. 1.使用 Jquery Uploadify 插件(http:// ...
- MYSQL系列-MYSQL基础增强(Myql函数)
MYSQL基础增强(Myql函数) 在这里只介绍一些常用的,比较新颖的: 字符串函数: CONCAT://字符串连接函数 mysql> SELECT CONCAT('My', 'S', 'QL' ...