JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离
* 能够使用jQuery设置尺寸
* .width() width
* .innerWidth() width + padding
* .outerWidth() width + padding + border
* .outerWidth(true) width + padding + border + margin
* 能够使用jQuery操作坐标
* .offset() 永远基于网页文档（document）获取
* .position() 基于定位的祖先元素(offsetParent)获取
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: palegreen;
padding:20px;
border: 10px solid darkcyan;
margin: 50px;
}
</style>
<script src="lib/jquery-1.12.2.js"></script> </head>
<body>
<div class="box">
width: 200px<br/>
height: 200px<br/>
padding:20px<br/>
border: 10px solid darkcyan<br/>
margin: 50px<br/> </div>
</body>
</html>
<script>
console.log(".css('width')获取盒子宽度=width:"+$('.box').css('width'));
console.log("width()获取盒子宽度= width :"+$('.box').width());
console.log("innerwidth()获取盒子宽度= width + padding :"+$('.box').innerWidth());
console.log("outerWidth()获取盒子宽度= width + padding + border:"+$('.box').outerWidth());
console.log("outerWidth(true)获取盒子宽度= width+ padding + border + margin:"+$('.box').outerWidth(true)); </script>
JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离的更多相关文章
- jquery获取元素的值，获取当前对象的父对象等等
jsp代码: <span><input type="hidden" value="1" id="newInfo">& ...
- H5_0017：通过元素自定义属性值获取元素对象，并获取属性值
// 通过元素的属性值查找对象 // document.querySelectorAll("[data]").forEach(function(e) ...
- 使用id名称和name直接获取元素
我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的 ...
- （转载）记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 自动化测试基础篇--Selenium获取元素属性
摘自https://www.cnblogs.com/sanzangTst/p/8375938.html 通常在做断言之前,都要先获取界面上元素的属性,然后与期望结果对比. 一.获取页面title 二. ...
- Javascript，获取元素，write方法
一:Javascript:弱类型脚本语言,是一种动态类型.实现部分动画效果和用户交互等 -- html是骨架(页面结构) css样式 js是行为 -- 弱类型体现: JS代码可以写在body,he ...
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
随机推荐
- C++对C的扩展、增强
C++对C的扩展 1. 双冒号::作用域运算符 代码中对同一个变量多次声明,在代码块中使用时,局部变量会将全局变量隐藏.若在代码块使用变量前添加::,表示为全局变量. ::表示作用域运算符,如常见的s ...
- Vue 将本地图片上传到阿里云
一.获取服务器通行证(即获取AccessKey和accessKeySecret) getAccess () { let that = this let url = '服务器地址' let params ...
- 谈一谈创建React Component的几种方式
当我们谈起React的时候,多半会将注意力集中在组件之上,思考如何将页面划分成一个个组件,以及如何编写可复用的组件.但对于接触React不久,还没有真正用它做一个完整项目的人来说,理解如何创建一个组件 ...
- PAT甲级——A1011 World Cup Betting
With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...
- java.sql.SQLIntegrityConstraintViolationException: Cannot add or update a child row: a foreign key constraint fails
HTTP Status 500 - Request processing failed; nested exception is org.hibernate.exception.ConstraintV ...
- 公司jar包提交到集群的方法
yarn -jar xx.jar 此时包会提交到集群上运行 也可以把jar包放到hbase 的lib下面用hbase jar 方式调用
- Octave 软件的安装
每次安装软件都感觉是一种心痛的历程.下载安装,然后就跳出一堆的错误,之后就各种百度求救,然后就搞了大半天,有时候还搞不定. 最后,搞定的时候发现,原来这么简单,结果时间就这样浪费了,所以还是把这个过程 ...
- Luogu P2066 机器分配(dp)
P2066 机器分配 题面 题目背景 无 题目描述 总公司拥有高效设备 \(M\) 台,准备分给下属的 \(N\) 个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这 \(M\ ...
- 跟我一起了解koa（四）
我们使用第二讲中的路由页面,再结合ejs,一起了解ejs在koa中的应用 1.安装koa-views和ejs cnpm install --save koa cnpm install koa-rout ...
- JavaScript的坑，缺陷
JavaScript的缺陷 1.在做判断的时候用=======而不是== 2.浮点预算有精度问题 通过差值去把这个精度锁定到一个范围 Math. Abs(A-B)<0.0001** 3.null ...