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部分全部一致欧!希望本文能帮到大家。

  • 相关阅读:
    Pytorch1.0入门实战二:LeNet、AleNet、VGG、GoogLeNet、ResNet模型详解
    Pytorch1.0入门实战一:LeNet神经网络实现 MNIST手写数字识别
    浅谈RNN、LSTM + Kreas实现及应用
    tensorflow 1.12.0 gpu + python3.6.8 + win10 + GTX1060 + cuda9.0 + cudnn7.4 + vs2017)
    高手详解SQL性能优化十条经验
    SQL语句操作符优化
    SQL优化
    34条简单的SQL优化准则
    销售订单无法使用折扣(其他可以正常使用)
    EBS FORM FOLDER 开发,单元格无法使用右键
  • 原文地址:https://www.cnblogs.com/ZXH-null/p/12403842.html
Copyright © 2011-2022 走看看