javascript读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)
JavaScript 介绍 区别 读取 样式 Style 之外 内联
2023-06-13 09:14:18 时间
样式表有三种方式
内嵌样式(inlineStyle):是写在Tag里面的,内嵌样式只对所有的Tag有效。
内部样式(internalStyleSheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效。
外部样式表(ExternalStyleSheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
下面的是读取除了内嵌样式之外样式的js,只能读不能写。
varmydiv=document.getElementById("mydiv");
if(mydiv.currentStyle){
varwidth=mydiv.currentStyle["width"];
alert("ie:"+width);
}elseif(window.getComputedStyle){
varwidth=window.getComputedStyle(mydiv,null)["width"]
alert("firefox:"+width);
}
另外在FF下还可以通过下面的方式获取
document.defaultView.getComputedStyle(mydiv,null).width
window.getComputedStyle(mydiv,null).width
最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
解决方案:引入currentStyle,runtimeStyle,getComputedStyle
style标准的样式!可能是由style属性指定的!
runtimeStyle运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle指style和runtimeStyle的结合!
通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE)
如:document.getElementById("test").currentStyle.top
要兼容FF,就得需要getComputedStyle出马了
注意:getComputedStyle是firefox中的,
currentStyle是ie中的.
比如说
<style>
#mydiv{
width:300px;
}
</style>
则:
varmydiv=document.getElementById("mydiv");
if(mydiv.currentStyle){
varwidth=mydiv.currentStyle["width"];
alert("ie:"+width);
}elseif(window.getComputedStyle){
varwidth=window.getComputedStyle(mydiv,null)["width"];
alert("firefox:"+width);
}
另外在FF下还可以通过下面的方式获取
document.defaultView.getComputedStyle(mydiv,null).width
window.getComputedStyle(mydiv,null).width
相关文章
- javascript_JavaScript走向成熟
- JavaScript 装饰器介绍
- JavaScript之垃圾回收机制
- JavaScript专项算法题(4):异步
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- javascript中存储和读取cookie详解编程语言
- 使用javascript+xml实现分页
- 解析arp病毒背后利用的Javascript技术附解密方法
- 给Javascript数组插入一条记录的代码
- javascript的currying函数介绍
- javascript学习笔记(三)String字符串类型介绍
- javascript面向对象入门基础详细介绍
- javascript克隆对象深度介绍
- javascript控制swfObject应用介绍
- javascript中onclick(this)用法介绍
- javascript两种function的定义介绍及区别说明
- 在javaScript中关于submit和button的区别介绍
- javascript实现信息的显示和隐藏如注册页面
- Javascript模拟加速运动与减速运动代码分享
- JavaScript设计模式之抽象工厂模式介绍
- JavaScript中的类(Class)详细介绍
- JavaScript中的数组特性介绍
- JavaScript实现按Ctrl键打开新页面