zoukankan      html  css  js  c++  java
  • jQuery 尺寸

    jQuery 尺寸方法

    jQuery 提供多个处理尺寸的重要方法:

    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()

    jQuery width() 和 height() 方法

    width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

    height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

    下面的例子返回指定的 <div> 元素的宽度和高度:

    <script>
    $(document).ready(function(){
      $("button").click(function(){
        var txt="";
        txt+="div 的宽度是: " + $("#div1").width() + "</br>";
        txt+="div 的高度是: " + $("#div1").height();
        $("#div1").html(txt);
      });
    });
    </script>

    <div id="div1" style="height:100px;300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button>显示 div 元素的尺寸</button>
    <p>width() - 返回元素的宽度</p>
    <p>height() - 返回元素的高度</p>

    jQuery innerWidth() 和 innerHeight() 方法

    innerWidth() 方法返回元素的宽度(包括内边距)。

    innerHeight() 方法返回元素的高度(包括内边距)。

    下面的例子返回指定的 <div> 元素的 inner-width/height:

    <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();
        $("#div1").html(txt);
      });
    });
    </script>

    jQuery outerWidth() 和 outerHeight() 方法

    outerWidth() 方法返回元素的宽度(包括内边距和边框)。

    outerHeight() 方法返回元素的高度(包括内边距和边框)。

    下面的例子返回指定的 <div> 元素的 outer-width/height:

    <script>
    $(document).ready(function(){
      $("button").click(function(){
        var txt="";
        txt+="div 宽度: " + $("#div1").width() + "</br>";
        txt+="div 高度: " + $("#div1").height() + "</br>";
        txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
        txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight();
        $("#div1").html(txt);
      });
    });
    </script>

    本文的html部分全部一致欧!希望本文能帮到大家。

  • 相关阅读:
    【Ogre编程入门与进阶】第二章 Ogre相关知识回顾 【转载】
    Ogre1.7.2 + CEGUI0.7.5环境配置 【转载】 需要配制出自己的基础环境
    JS_模拟广告栏跟随效果
    JS_模拟电商网站放大镜效果
    JS_图片轮播事件
    JS_DOM事件之鼠标事件之随鼠标移动
    JS_DOM之小球随鼠标移动事件
    JS_DOM事件温习
    JS_原型和继承之小案例
    JS_生成随机矩形位置/矩形大小_面向对象_原型+构造函数模式
  • 原文地址:https://www.cnblogs.com/ZXH-null/p/12403842.html
Copyright © 2011-2022 走看看