jquery的innerWidth 和 innerHeight的使用

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuzhudong/p/7655837.html

文章标签：

#javascript #ViewUI

innerWidth

This method returns the width of the element, including left and right padding, in pixels.

If called on an empty set of elements, returns undefined (null before jQuery 3.0).
This method is not applicable to window and document objects; for these, use .width() instead.

innerWidth("value")

When calling .innerWidth("value"), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as 100px, 50%, or auto). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the box-sizing CSS property is used.If no explicit unit is specified (like "em" or "%") then "px" is assumed.

demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerWidth</title>
    <style>
        p { margin: 10px;padding: 5px;border: 2px solid #666;}
        em {color: red;}
        div { width: 60px;padding: 10px;height: 50px;float: left;margin: 5px;background: red;cursor: pointer;}
        .mod { background: blue;cursor: default;}
    </style>
</head>
<body>
    <strong><em>innerWidth</em>:This method returns the width of the element, including left and right padding, in pixels. If called on an empty set of elements, returns undefined (null before jQuery 3.0).
This method is not applicable to window and document objects; for these, use .width() instead.</strong>
    <p>Hello</p>
    <p></p>
    <blockquote> <strong><em>innerWidth("value")</em> : When calling .innerWidth("value"), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as 100px, 50%, or auto). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the box-sizing CSS property is used.If no explicit unit is specified (like "em" or "%") then "px" is assumed.</strong></blockquote>
    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>
    <div>d</div>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
<script>
    $(function(){
    var p = $( "p:first" );
    $( "p:last" ).text( "innerWidth:" + p.innerWidth() );
    $(window).resize(function(event) {
          $( "p:last" ).text( "innerWidth:" + p.innerWidth() );
     });
    var modWidth = 60;
    $( "div" ).one( "click", function() {
    $( this ).innerWidth(modWidth).addClass( "mod" );
    modWidth -= 8;
    });
})
</script>
</script>
</body>
</html>