zoukankan      html  css  js  c++  java
  • 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 {  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>

    样式如下:

  • 相关阅读:
    gvim编辑器 命令列表
    svn 使用
    php 实现 从一个目录中 把指定类型文件 重新组装到新的目录
    gvim 编辑器代码折叠
    简单的 文件 管理操作
    javascript DOM object 操作
    gvim代码补全
    gvim 编辑器配置
    javascript DOM model操作
    SQL分页语句 (转载)
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/7655837.html
Copyright © 2011-2022 走看看