获取非行间样式

最新推荐文章于 2019-11-11 09:22:14 发布

春花秋月灬相伴

最新推荐文章于 2019-11-11 09:22:14 发布

阅读量332

点赞数

本文链接：https://blog.csdn.net/qq_38300174/article/details/71104261

版权

有人问不能简单的使用
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 分离是一个好习惯，在日后的工作工，此类代码会经常用到
大家可以封装函数，方便调用
谢谢支持

春花秋月灬相伴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取非行间样式

有人问不能简单的使用 alert(oDiv.style.width);来获取元素样式吗例可以获取的情况：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oDiv=document.getElementBy
复制链接

扫一扫

获取 非行间样式

获取非行间样式