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>

  • 相关阅读:
    剑指offer-删除链表中重复的节点
    剑指offer——二叉树中和为某一值的路径
    动态规划之140 Word Break2
    动态规划之139 Word Break
    动态规划之132 Palindrome Partitioning II
    动态规划之115 Distinct Subsequences
    动态规划之97 Interleaving String
    动态规划之91 decode ways
    vector
    第一篇
  • 原文地址:https://www.cnblogs.com/lilixing/p/4681906.html
Copyright © 2011-2022 走看看