【jQuery笔记Part1】09-jQuery操作css-尺寸
jQuery操作css-尺寸
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
- outerWidth(true)
- outerHeight(true)
- 案例演示
jQuery笔记目录
width()
设置或返回元素的宽度(不包括内边距、边框或外边距)
height()
设置或返回元素的高度(不包括内边距、边框或外边距)
innerWidth()
返回元素的宽度(包括内边距)
innerHeight()
返回元素的高度(包括内边距)
outerWidth()
返回元素的宽度(包括内边距和边框)
outerHeight()
返回元素的高度(包括内边距和边框)
outerWidth(true)
返回元素的宽度(包括内边距、边框和外边距)
outerHeight(true)
返回元素的高度(包括内边距、边框和外边距)
案例演示
创建一个div, 设置内边距, 外边距, 边框; 分别打印以上属性:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{background-color: yellow;width: 100px;height: 100px;padding: 10px; /*内边距 上下左右均为10px*/border: 2px solid #000000; /*边框的粗细与颜色*/margin: 30px; /*外边距*/}</style>
</head>
<body><div id="box"></div><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script><script type="text/javascript">$(function () {var $box = $('#box');console.log($box.width()); // 元素的宽度(不包括内边距、边框或外边距)console.log($box.height()); // 元素的高度(不包括内边距、边框或外边距)console.log($box.innerWidth()); // 元素的宽度(包括内边距)console.log($box.innerHeight()); // 元素的高度(包括内边距)console.log($box.outerWidth()); // 元素的宽度(包括内边距和边框)console.log($box.outerHeight()); // 元素的高度(包括内边距和边框)console.log($box.outerWidth(true)); // 元素的宽度(包括内边距、边框和外边距)console.log($box.outerHeight(true)); // 元素的高度(包括内边距、边框和外边距)});</script>
</body>
</html>
运行结果:
如果要修改某个属性,只需要在括号里传值即可。
console.log('元素的宽度(不包括内边距、边框或外边距)' + $box.width(300));
console.log('元素的高度(不包括内边距、边框或外边距)' + $box.height(200));
【jQuery笔记Part1】09-jQuery操作css-尺寸相关推荐
- 【jQuery笔记Part1】08-jQuery操作css-获取设置样式
jQuery操作css-css() 通过 css() 方法获取样式 通过 css() 方法设置样式 方法一:单一属性设置 方法二:链式调用 方法三:多个属性设置(最常用) 完整案例 jQuery笔记目 ...
- 【jQuery笔记Part1】07-jQuery操作css-添加删除切换类、开关灯泡案例
jQuery操作css-添加&删除&切换类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() ...
- 【jQuery笔记Part1】10-jQuery操作html-获取设置
jQuery操作html-获取&设置 获取内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表 ...
- 【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换 概念 为什么要转换 转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象 原理图 jQuery笔记目录 概念 jQuery对象 是通 ...
- 【jQuery笔记Part1】01-jQuery简介集成
jQuery简介&集成 JS的问题? jQuery 概念 jQuery 特点 jQuery 功能 jQuery 集成方式 本地集成 远程集成 jQuery笔记目录 JS的问题? onload ...
- 【jQuery笔记Part1】11-jQuery选择器
jQuery选择器 基本选择器 层级选择器 属性选择器 筛选选择器 siblings 案例 jQuery笔记目录 基本选择器 初始 html 页面: <!DOCTYPE html> < ...
- 【jQuery笔记Part1】05-jQuery解决冲突
jQuery解决冲突 当 jQuery 内部的 $ 被其他函数库覆盖 解决方案一:将所有 $ 替换为 jQuery 解决方案二:借助匿名函数包裹执行 当其他函数库的 $ 被 jQuery 覆盖 解决方 ...
- 【jQuery笔记Part1】02-jQuery代码风格
jQuery代码风格 1. 代码风格 2. 基本语法格式 示例 jQuery笔记目录 1. 代码风格 在 jQuery 程序中,不管是页面元素的选择.内置的功能函数的调用,都是美元符号 $ 来起始的. ...
- 【jQuery笔记Part1】12-jQuery元素的角标
jQuery元素的角标 常见的鼠标事件 mouseenter 鼠标指针穿过被选元素时 mouseleave 鼠标移出被选元素内部时 mouseover 鼠标指针穿过被选元素或其子元素时 mouseou ...
最新文章
- php.ini 中文版第二部分(关于这个配制文件)
- 【收藏】编译安装keepalived
- php 解析 saml协议,解出SAMLRequest的代码示例
- 获取redis实例绑定cpu的情况
- mysql组件化_MySql笔记
- 网站前端组织冒泡事件
- 微信公众账号 token 验证失败 解决办法
- attributeerror python_python练习类的时候遇到了AttributeError?
- 五十一、【Bluetooth蓝牙模块】
- vs2005中的aspnetdb(转)
- 帆软:不使用 __parameters__ 传参,问题。
- ACL-IJCAI-SIGIR顶级会议论文报告会(AIS 2022)笔记1:推荐系统
- 实现Excel下拉自动填补对应内容到后面单元格
- w10恢复出厂设置_笔记本电脑w10怎么恢复出厂设置
- 计算机编辑功能在哪,win10系统本地组策略编辑器在哪的具体步骤
- 人脸识别技术及其各种用例
- 2021年中国皮卡产销量及市场竞争格局分析[图]
- 【coppeliasim】高效传送带
- 怎么隐藏CAD文件里的图层?
- eap方法 华为手机怎么连wifi_怎样为WLAN选择最佳的EAP?