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>

  • 相关阅读:
    Eclipse关于怎么调出web project
    RMI(远程方法调用)入门
    XSS攻击
    微信小程序
    java——IO流01
    06 python下
    06python上
    05python下
    05python上
    Nginx & Apache_网站用户认证
  • 原文地址:https://www.cnblogs.com/lilixing/p/4681906.html
Copyright © 2011-2022 走看看