JS非行间样式获取函数的实例代码
更新时间：2018年06月05日 10:46:26 作者：糯米控
这篇文章主要介绍了JS非行间样式获取函数的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
行间样式：元素内部用style定义的样式，如:<div style="width:200px;"></div>
非行间样式：在<style></style>内通过css定义的样式
先看一段出问题的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
height: 100px;
width: 100px;
border: 2px solid black;
background: red;
}
</style>
<body>
<div id="div1" style="">
宽
</div>
</body>
<script type="text/javascript" >
window.onload =function(){
var oDiv1=document.getElementById('div1');
oDiv1.onclick=function(){
oDiv1.style.width=200+'px';
}
}
</script>
</html>
我在页面放了一个方块，红底黑边，想通过点击该方块让他的宽度变为200px，看一下结果——没有任何反应，也没有报错。
在事件中添加alert('a');有反应，说明onclick事件被触发了，那么就是
oDiv1.style.Width=200+'px';
这行代码有问题。
打印一下这个这个变量：
alert(oDiv1.style.Width);
虽然不报错，但是显示空白，即使用变量赋值之后任然无法获取这个值，真正的原因是style只能获取行间样式，试一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
</style>
<body>
<div id="div1" style="height: 100px;
width: 100px;
border: 2px solid black;
background: red;">
宽
</div>
</body>
<script type="text/javascript" >
window.onload =function(){
var oDiv1=document.getElementById('div1');
oDiv1.onclick=function(){
oDiv1.style.width=200+'px';
}
}
</script>
</html>
可以确定确实是行间样式与非行间样式的问题，实际上不可能把所有样式都写在行间。
要解决这个问题，需要引入两个元素属性——currentStyle和getComputedStyle(obj, false)
currentStyle——获取非行间（当前样式）IE浏览器专属，chrome和FF不兼容。
getComputedStyle(obj, false)——获取非行间（计算后的样式）IE不兼容。
<script type="text/javascript" >
window.onload =function(){
var oDiv1=document.getElementById('div1');
oDiv1.onclick=function(){
//FF、chrome
alert(getComputedStyle(oDiv1, false).width);
//IE
alert(oDiv1.currentStyle.width);
}
}
</script>
把他封装一下写成一个公用函数：
//obj：哪个元素
//attr：那个样式
function getStyle(obj,attr){
if(obj.currentStyle){
//IE
return obj.currentStyel[attr];
}else{
//FF
return getComputedStyle(obj, false)[attr];
}
}
通过判断obj.currentStyle是否为真来判断当前浏览器为IE还是其他。
注意：.width的写法可以写成['width']
总结
以上所述是小编给大家介绍的JS非行间样式获取函数的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JavaScript返回网页中超链接数量的方法,使用javascript中的document.links实现这一功能,需要的朋友可以参考下2015-04-04
微信小程序中this.data与this.setData的区别详解
这篇文章主要给大家介绍了关于微信小程序中this.data与this.setData区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧2018-09-09
javascript中的Function.prototye.bind
这篇文章主要介绍了javascript中的Function.prototye.bind的相关资料,需要的朋友可以参考下2015-06-06
JavaScript实现简易的天数计算器实例【附demo源码下载】
这篇文章主要介绍了JavaScript实现简易的天数计算器,结合实例形式分析了javascript日期与时间计算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-01-01
本文给大家总结了12种JavaScript 中的1循环遍历方法,每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了微信小程序 自定义消息提示框的相关资料,wx.showToast(OBJECT)接口调用，实现改功能，需要的朋友可以参考下2017-08-08
最近做项目的过程中，使用到了ES6，因为之前很少接触，所以使用起来还不够熟悉。通过学习网上的教程后觉着有必要整理下遇到的let和const命令，所以这篇文章主要给大家介绍了ES6中let和const命令的相关资料，需要的朋友可以参考下。2017-05-05
这篇文章主要为大家详细介绍了js实现简单手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了JS实现拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了浅谈Webpack核心模块tapable解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论