有人问 不能简单的使用
alert(oDiv.style.width);
来获取元素样式吗
例
可以获取的情况:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
alert(oDiv.style.width);
};
</script>
</head>
<body>
<div id="div1" style="width:200px; height:200px; background:red;">
</div>
</body>
</html>
不可以获取的情况
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
width:200px; height:200px; background:red;
}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
alert(oDiv.style.width);
};
</script>
</head>
<body>
<div id="div1" style="">
</div>
</body>
</html>
观察 为什么不行,二者区别就是 一个div的样式在行间,一个在单独的css样式,而在我们编程调试过程中,会发现这样的结果
执行如下程序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
width:200px; height:200px; background:red;
}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.style.width='400'+'px';
};
</script>
</head>
<body>
<div id="div1" >
</div>
</body>
</html>
我执行过此函数后 在 调试工具中发现 已经在行间加入width:400px;
一定要注意 这里是在 行间加入的样式
说咱最开始说到的那个问题;答案即
alert(oDiv.style.width);不能获取非行间样式
解决 如下 代码走起
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red;}
</style>
<script>
window.onload=function ()//获取非行间样式的方法
{
var oDiv=document.getElementById('div1');
if(oDiv.currentStyle) //if else 是考虑兼容性问题,此代码段大家可以记下,以后会经常用到
{
alert(oDiv.currentStyle.width);
}
else
{
alert(getComputedStyle(oDiv, false).width); //false那个位置,可以填随便的东西,本人习惯false;
}
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
js css html 分离 是一个好习惯,在日后的工作工,此类代码会经常用到
大家可以封装函数,方便调用
谢谢支持