jquery的innerWidth 和 innerHeight的使用

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>

样式如下：

 

posted on 2017-10-12 14:35  baoyadong  阅读(477)  评论(0)  编辑  收藏  举报

导航