博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 入门教程(18): 操作HTML元素的大小
阅读量:6533 次
发布时间:2019-06-24

本文共 801 字,大约阅读时间需要 2 分钟。

hot3.png

jQuery 提供下面方法来控制HTML元素的大小:

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

一般影响HTML元素 大小各部分的示意图如下所示:

 

jQuery width()和height()方法

width()用来设置或取得元素的宽度,height()设置和取得元素的高度。

下面代码取得<div>元素的高度和宽度。

[javascript] 
  1. $("button").click(function(){  
  2.    var txt="";  
  3.    txt+="Width: " + $("#div1").width() + "</br>";  
  4.    txt+="Height: " + $("#div1").height();  
  5.    $("#div1").html(txt);  
  6.  });  

 

jQuery的innerWidth()和innerHeight()方法

innerWidth() 返回元素包括Padding的宽度,innerHeight()返回包括Padding的高度。

jquery的outerWidth()和 outerHeight()方法

outerWidth()返回包括 padding 和 border的宽度,outerHeight()返回包括padding 和 border的高度。

而outWidth(true)和 outHeight(true) 返回包括padding, border和margin的高度和宽度。

下面的例子设置指定

元素的宽度和高度:
[javascript] 
  1. $("button").click(function(){  
  2.    $("#div1").width(500).height(500);  
  3.  });  

转载于:https://my.oschina.net/u/194743/blog/164713

你可能感兴趣的文章
什么是 A 轮融资?有 B轮 C轮么?
查看>>
55、Android网络图片 加载缓存处理库的使用
查看>>
svn文件提交时强制写注释
查看>>
【转载】千万级规模高性能、高并发的网络架构经验分享
查看>>
jsp字段判空
查看>>
OC基础--OC中的类方法和对象方法
查看>>
ubuntu samba服务器多用户配置【转】
查看>>
母线的种类与作用是什么(转)
查看>>
【Xamarin 挖墙脚系列:IOS 开发界面的3种方式】
查看>>
Atitit.工作流系统的本质是dsl 图形化的dsl 4gl
查看>>
I.MX6 Android USB Touch eGTouchA.ini文件存放
查看>>
4-5-创建索引表-串-第4章-《数据结构》课本源码-严蔚敏吴伟民版
查看>>
java 操作 RabbitMQ 发送、接受消息
查看>>
go run main.go undefined? golang main包那点事
查看>>
前端进阶(13) - 搭建自己的前端脚手架
查看>>
数据挖掘(二):认识数据
查看>>
从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
查看>>
Golang中的路由
查看>>
【期末考试季】JAVA进阶复习提纲
查看>>
Volley(二)—— 基本Request对象 & RequestQueue&请求取消
查看>>