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>

    样式如下:

  • 相关阅读:
    MyBatis 内连接association 左外连接collection
    mybatis的基本配置:实体类、配置文件、映射文件、工具类 、mapper接口
    SpringMVC 使用Form标签库制作登录表单
    SpringMVC 配置过滤器解决中文乱码问题
    用户登录模块————账户安全问题
    HashSet,TreeSet和LinkedHashSet的区别
    SpringMVC 服务器端验证
    php输出(下载)文件
    26进制(字母)转十进制算法
    PHP之可变变量
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/7655837.html
Copyright © 2011-2022 走看看