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 ...
随机推荐
- Odoo文档管理/知识管理应用实践 - 上传附件
测试环境: Odoo8.0 Odoo中的文档管理/知识管理可用于保存采购.销售.生产等一系列业务流程中产生的文件.凭证,可关联到具体的每一笔业务操作:也能用于管理公司的合同.资料,创建知识库以分享内部 ...
- 关于Canvas的坐标系
注意Canvas的坐标系应该是这样子的: 看下面的例子: 最后的显示效果是:
- php冒泡算法
1.冒泡算法 网上搜了很多,但是总是对于每次循环的边界值思路讲的比较笼统. 不是很容易被新手记住,我自己平时也是硬记下来的. 但是对于算法,硬记,时间长了还是容易忘记,所以自己写了一次,把每次思路尽量 ...
- HZOI20190803 A，C题
题目链接:https://www.cnblogs.com/Juve/articles/11295333.html A: 考场上只有70分... 发现几个性质:特殊性质1:在两条链上,看它是fib第几项 ...
- Elasticsearch 5.6.4 window 安装并简单使用head
1.现在elasticsearch安装包 https://www.elastic.co/downloads/elasticsearch 2.解压elasticsearch-5.6.4.zip 到需要安 ...
- org.hibernate.service.spi.ServiceException: Unable to create requested service [org.hibernate.engine.jdbc.connections.spi.ConnectionProvider]
从hibernate3升级到4应该会遇到 应该添加引用 <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-c3p0 ...
- 转载 Python 安装setuptools和pip工具操作方法(必看)
本文章转载自 脚本之家 http://www.jb51.net 感谢! setuptools模块和pip模块是python进行第三方库扩展的极重要工具,例如我们在需要安装一些爬虫或者数据分析的包时就 ...
- Java基础程序与面向对象
首先,我们需要了解和知道一些Java的基本概念: 程序编译过程:.java文件会通过编译器--被编译成一个. class字节码文件---再由虚拟机运行.class文件解释运行Java程序. 编码规范: ...
- Zookeeper教程
由于zookeeper使用java语言编写,因此我们运行zookeeper需要保证你的服务器上已经安装了jdk. 安装zk 本文介绍的前提是已经默认安装好了jdk,Linux安装JDK教程https: ...
- CF 578B "Or" Game
传送门 解题思路 题意大概是给你一个数列,可以进行k次操作,每次操作可以选择一个数乘x,问操作后的或的最大值.根据位运算,位数越高答案越优,所以贪心的使这k次操作全都放到一个数上,这样的结果肯定较优. ...