zoukankan      html  css  js  c++  java
  • 关于jquery尺寸的总结

    以前总是对jquery的尺寸稀里糊涂,有需要的可以看下下面的代码:

    ①页面布局如下:

    <!doctype html>
    <html>
    <head>
       <meta charset="UTF-8">
       <title>jquery尺寸练习</title>
       <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
       <style>
          .div1 {
             width:360px;
             height:300px;
             background:pink;
             border:2px solid #000;
             margin:10px;
             padding: 20px;
             line-height: 24px;
          }
       </style>
    </head>
    <body>
       <div class="div1"></div>
       <button>显示 div 元素的尺寸</button>
       <p>总结如下:</p>
       <p>width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。</p>
       <p>height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。</p>
       <p>innerWidth() 方法返回元素的宽度(包括内边距)。</p>
       <p>innerHeight() 方法返回元素的高度(包括内边距)。</p>
       <p>outerWidth() 方法返回元素的宽度(包括内边距和边框)。</p>
       <p>outerHeight() 方法返回元素的高度(包括内边距和边框)。</p>
       <p>outerHeight(true) 方法返回元素的高度(包括内边距和边框、外边距)。</p>
       <p>outerHeight(true) 方法返回元素的高度(包括内边距和边框、外边距)。</p>
    </body>
    </html>
    ②javascript代码如下:
    <script>
       $(document).ready(function(){
          $("button").click(function(){
             var txt = '';
             txt+="div 宽度:"+$(".div1").width()+"<br/>";
             txt += "div 高度:"+$(".div1").height()+"<br/>";
             txt +="div 宽度,包含内边距:"+$(".div1").innerWidth()+"<br>";
             txt+="div 高度,包含内边距:"+$(".div1").innerHeight()+"<br>";
             txt +="div 宽度,包含内边距和边框:"+$(".div1").outerWidth()+"<br>";
             txt+="div 高度,包含内边距和边框:"+$(".div1").outerHeight()+"<br>";
             txt +="div 宽度,包含内边距、边框和外边距:"+$(".div1").outerWidth(true)+"<br>";
             txt+="div 高度,包含内边距、边框和外边距:"+$(".div1").outerHeight(true)+"<br>";
    
             $(".div1").html(txt);
          });
       });
    </script>

    这次将尺寸理解明白,很感谢菜鸟教程这个网站,这是一个很不错的网站,适合新手入门。我很多不懂的东西都是通过这个网站学习的。另外附上一张尺寸图,如下:

    最后,还是要多敲代码,即使是你能看懂的代码,有时候能看得懂当自己敲的时候不一定能敲出来。

    
    
  • 相关阅读:
    FAQ: c++ 函数名后添加 const void function1(int &id) const
    FAQ: C++中定义类的对象:用new和不用new有何区别?
    How to create a project with existing folder of files in Visual Studio?
    How to export a template in Visual Studio?
    t4 multiple output sample
    fastjson1.2.48以下版本存在重大漏洞
    一秒完成springboot与logback配置
    统计greenplum_postgresql数据占用存储情况
    上传文件不落地转Base64字符串
    三个标签完成springboot定时任务配置
  • 原文地址:https://www.cnblogs.com/hongxp/p/5898054.html
Copyright © 2011-2022 走看看