*  能够使用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-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离的更多相关文章

  1. jquery获取元素的值，获取当前对象的父对象等等

    jsp代码: <span><input type="hidden" value="1" id="newInfo">& ...

  2. H5_0017：通过元素自定义属性值获取元素对象，并获取属性值

            // 通过元素的属性值查找对象         // document.querySelectorAll("[data]").forEach(function(e) ...

  3. 使用id名称和name直接获取元素

    我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的 ...

  4. （转载）记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  5. 自动化测试基础篇--Selenium获取元素属性

    摘自https://www.cnblogs.com/sanzangTst/p/8375938.html 通常在做断言之前,都要先获取界面上元素的属性,然后与期望结果对比. 一.获取页面title 二. ...

  6. Javascript，获取元素，write方法

    一:Javascript:弱类型脚本语言,是一种动态类型.实现部分动画效果和用户交互等 -- html是骨架(页面结构)  css样式  js是行为 -- 弱类型体现: JS代码可以写在body,he ...

  7. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  8. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

随机推荐

  1. hdu1527

    hdu1527两堆博弈模型,威佐夫博弈 #include<iostream> #include<cstdio> #include<queue> #include&l ...

  2. Tuxera ntfs软件如何删除干净

    sudo /Library/Filesystems/fusefs_txantfs.fs/Contents/Resources/Support/uninstall-package.sh

  3. 19-10-24-H

    H H H H H H ZJ一下: T1只会暴力,测试点分治. (表示作者的部分分并没有给够,暴力加部分表按测试点分类可以得60吧……) T2先直接手玩第一个子任务. 然后就$Find$了一个神奇的( ...

  4. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---迭代器模式之DinerMenu[转]

    容器的主要职责有两个:存放元素和浏览元素.根据单一职责原则(SRP)要将二者分开,于是将浏览功能打包封装就有了迭代器. 用迭代器封装对动态数组的遍历:  1  2{<HeadFirst设计模式& ...

  5. 转载：JVM内存分代策略

    Java虚拟机根据对象存活的周期不同,把堆内存划分为几块,一般分为新生代.老年代和永久代(对HotSpot虚拟机而言),这就是JVM的内存分代策略. 为什么要分代? 堆内存是虚拟机管理的内存中最大的一 ...

  6. 移动端自动化测试Appium 从入门到项目实战Python版

    移动端自动化测试Appium 从入门到项目实战Python版  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课 ...

  7. 使用Maven编译运行Storm入门代码(Storm starter)(转)

    Storm 官方提供了入门代码(Storm starter),即 Storm安装教程 中所运行的实例(storm-starter-topologies-0.9.6.jar),该入门代码位于 /usr/ ...

  8. 2019-10-16-WPF-控件-Content-的内容不显示下划线字符串

    title author date CreateTime categories WPF 控件 Content 的内容不显示下划线字符串 lindexi 2019-10-16 09:21:32 +080 ...

  9. 2018-8-17-C#-从零开始写-SharpDx-应用-控制台创建-Sharpdx-窗口

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 控制台创建 Sharpdx 窗口 lindexi 2018-8-17 9:3:3 ...

  10. Promise的源码实现（符合Promise/A+规范）

    我们手写一个Promise/A+规范,然后安装测试脚本,以求通过这个规范. //Promise/A+源代码 // new Promise时,需要传递一个executor执行器,执行器立即执行 // e ...