zoukankan      html  css  js  c++  java
  • javascript 获取元素宽高

    style.width,clientWidth,offsetWidth

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>document</title>
    <style>
    div{ padding:40px 50px;}
    #div1 { background:red;}
    #div2 { background:blue; position:relative;}
    #div3 { background:orange;}
    </style>
    <script type="text/javascript">
        
        window.onload = function() {
            
            var oDiv1 = document.getElementById('div1');
            /*
                style.样式宽(带单位)
                clientWidth: 可视区宽(样式宽+padding 不带单位)
                offsetWidth:占位宽(样式宽+padding+border 不带单位)
            */
            
            alert(oDiv1.style.width + '  ' + oDiv1.clientWidth + '  ' + oDiv1.offsetWidth);
        }
        
    </script>
    </head>
    
    <body id="body">
        <div id="div1" style="100px; height:100px; padding:10px; margin:10px; border:1px solid red;"></div>
    </body>
    </html>

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>document</title>
    <style>
    div{ padding:40px 50px;}
    #div1 { background:red;}
    #div2 { background:blue; position:relative;}
    #div3 { background:orange;}
    </style>
    <script type="text/javascript">
        
        window.onload = function() {
            
            var oDiv1 = document.getElementById('div1');
            /*
                style.样式宽(带单位)
                clientWidth: 可视区宽(样式宽+padding 不带单位)
                offsetWidth:占位宽(样式宽+padding+border 不带单位)
            */
            
            alert(oDiv1.style.width + '  ' + oDiv1.clientWidth + '  ' + oDiv1.offsetWidth);
        }
        
    </script>
    </head>

    <body id="body">
        <div id="div1" style="100px; height:100px; padding:10px; margin:10px; border:1px solid red;"></div>
    </body>
    </html>

  • 相关阅读:
    出差兰州
    出差乌鲁木齐(3)
    依赖倒置原则
    .NET 打印界面
    出差乌鲁木齐2
    出差乌鲁木齐(2)
    出差乌鲁木齐3
    IStyleGallery.AddItem、UpdateItem、RemoveItem用法
    Shapefile记录检索
    c#利用最小二乘法拟合任意次函数曲线(转)
  • 原文地址:https://www.cnblogs.com/lilixing/p/4681906.html
Copyright © 2011-2022 走看看