jQuery innerWidth() 方法

  • 定义和用法

    innerWidth() 方法返回第一个匹配元素的内部宽度。
    如下面的图像所示,该方法包含 padding,但不包含 border 和 margin。
    外形尺寸图
  • 语法

    $(selector).innerWidth()
  • 实例

    下例演示了返回指定 <div>元素的内部宽度/高度:
    <!DOCTYPE html>
         <html lang="en">
         <head>
         <meta charset="UTF-8">
         <title>欢迎来到蝴蝶教程</title>
         //此版本是百度cdn 1.11.1,当然你可以使用更高的版本,从2.0版本以上的是不支持ie6-8的
         <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
         <script>
            $(document).ready(function () {
                $("button").click(function(){
                     var txt = "";
                     txt += "div 宽度,包含内边距:" + $("#div1").innerWidth() + "<br/>";
                     txt += "div 高度,包含内边距:" + $("#div1").innerHeight();
                     $("#div1").html(txt);
                });
             });
      </script>
      </head>
      <body>
          <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;background-color:#ddd;">这是一个段落</div>
          <button>点击显示div元素的尺寸</button>
      </body>
      </html>           
    
    尝试一下
  • 相关方法