jquery 尺寸

news/2024/7/11 1:15:52 标签: jquery

通过 jQuery,很容易处理元素和浏览器窗口的尺寸。
jQuery 尺寸方法
jQuery 提供多个处理尺寸的重要方法:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
在这里插入图片描述
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
下面的例子返回指定的

元素的宽度和高度:

jq代码:

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

html代码:

<div id="div1" style="height:100px;width: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() 方法返回元素的高度(包括内边距)。
下面的例子返回指定的

元素的 inner-width/height:

jq代码:

<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>

html代码:

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
下面的例子返回指定的

元素的 outer-width/height:

jq代码:

<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代码:

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>


http://www.niftyadmin.cn/n/1521214.html

相关文章

【Linux】CentOS系统文件名中不同的颜色都代表什么意思

转自&#xff1a;http://www.ma2ge.com/html/1275.html 在Linux中&#xff0c;文件的颜色都是有含义的。其中&#xff0c; Linux中文件名颜色不同&#xff0c;代表文件类型不一样。如下所示&#xff1a; 浅蓝色&#xff1a;表示链接文件&#xff1b; 灰色&#xff1a;表示其…

【Linux】基本操作

目录相关命令&#xff1a; ls 浏览当前所在目录 -a 浏览所有文件包括隐藏文件&#xff08;.&#xff09; -l 显示详细信息 / 命令名称[操作选项][ ] pwd 显示当前工作路径&#xff08;当前所在目录&#xff09;如&#xff1a;…/dev指的就是上一层目录下的dev目录 本应为./……

【网络】TCP/IP五层模型中的典型协议以及特性

OSI七层模型&#xff1a;应用层&#xff0c;表示层&#xff0c;会话层&#xff0c;传输层&#xff0c;网络层&#xff0c;链路层&#xff0c;物理层。由于它既复杂又不实用所以提出了TCP/IP五层协议 1. 应用层&#xff1a;&#xff08;OSI的应用层&#xff0c;表示层&#xff…

【泛型】一、为什么需要泛型

假设需要你定义一个描述坐标的程序类Point&#xff0c;需要提供两个属性x、y。对于这两个属性的内容可能有如下选择&#xff1a; x 10、y 20 &#xff1b;x 10.1、y 20.1 &#xff1b;x 东经80度、y 北纬20度 那么现在首先要解决的问题就是Point类中的x、y的属性类型问…

【泛型】二、泛型类

泛型其实就是语法糖守门员&#xff0c;是一种编译器的保护作用。 泛型在类定义的时候并不会设置类中的属性或方法中的参数的具体类型&#xff0c;而是在类使用时再进行定义。 /* 泛型类简介*/ package genericityClass; //此时t和e是同一个类型&#xff0c;比如说在主方法中定…

【泛型】三、泛型方法

泛型不仅可以用于定义类&#xff0c;还可以单独来定义方法。在方法声明上使用表示的方法叫做泛型方法 /* 泛型方法引入 */ class Myclass<T>{public static <T> void fun(T t){System.out.println(t);} } public class Test1 {public static void main(String[] a…

【必看】 Vue 常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度。

1.vue优点&#xff1f; 答&#xff1a; 轻量级框架&#xff1a;只关注视图层&#xff0c;是一个构建数据的视图集合&#xff0c;大小只有几十 kb &#xff1b; 简单易学&#xff1a;国人开发&#xff0c;中文文档&#xff0c;不存在语言障碍 &#xff0c;易于理解和学习&#…

【泛型】四、泛型接口

泛型接口实现子类有两种方法&#xff1a; 1.在实现接口时就确定好接口的类型&#xff0c;这样子类其实就是一个普通类&#xff0c;因为他已经确定好他传的是一个String类 2.子类实现接口时仍然保留泛型&#xff0c;此时子类也是泛型类 /* 泛型接口*/ interface ISubject<T&…