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 ...
随机推荐
- typeof, offsetof, container_of宏
container_of宏实现如下: #define container_of(ptr, type, member) ({ \ )->member ) *__mptr = (ptr); \ (t ...
- Tool-MySQL-SQLyog：SQLyog
ylbtech-Tool-MySQL-SQLyog:SQLyog SQLyog 是一个快速而简洁的图形化管理MYSQL数据库的工具,它能够在任何地点有效地管理你的数据库,由业界著名的Webyog公司出 ...
- Java内功修炼系列一代理模式
代理模式是JAVA设计模式之一,网上设计模式相关的博文铺天盖地,参考它们有助于自己理解,但是所谓“尽信书不如无书”,在参考的同时也要思考其正确性,写博客也是为了记录自己理解知识点的思路历程和心路历程, ...
- css 一行或多行文字溢出以...的形式隐藏
一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...
- vue实现跳转路由
参考vue官方文档:https://router.vuejs.org/zh/guide/essentials/navigation.html // 字符串 router.push('home') // ...
- 配置android studio环境-Hello world
运行hello world demo 运行D:\Program Files\Android\Android Studio\bin 选择创建一个项目 出现一系列的选择 如果没有出现下列问题,直接跳过 备 ...
- C# 多线程的代价~内存都被吃了！
异步操作是.net4.5推出的新名词,事实上,这东西早就有了,它归根结底是通过线程池来实现的,即将一个大任务分成多个小任何块,每个线程并行处理其中的一个,完成后再把结果告诉主线程,在.net4.5推出 ...
- 因子分析spss怎么做 spss因子分析教程及结果解释
因子分析spss怎么做 spss因子分析教程及结果解释 因子分析spss可以简化数据结构,将具有错综复杂关系的变量综合为数据较少的因子,在信息损失最小的情况下对变量进行分类,不过有些朋友多spss因子 ...
- jnhs 无法提交断点LineBreakpoint hibernate4CURD : -1, 原因是: 找不到 URL 'file:/E:/版本控制/Design-java/hibernate4CURD/' 的源根目录。请验证项目源的设置。
无法提交断点LineBreakpoint hibernate4CURD : -1, 原因是: 找不到 URL 'file:/E:/版本控制/Design-java/hibernate4CURD/' 的 ...
- 揭秘webdriver实现原理【转】
通过研究selenium-webdriver的源码,笔者发现其实webdriver的实现原理并不高深莫测无法揣度.在这里以webdriver ruby binding的firefox-webdrive ...