*  能够使用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. istringstream字符串流对象

    1.读取字符串流对象 istringstream类用于执行C++风格的字符串流的输入操作. ostringstream类用于执行C++风格的字符串流的输出操作. strstream类同时可以支持C++ ...

  2. tyvj 1266 费解的开关

    传送门 解题思路 枚举第一行的状态,判断后面可不可行. 代码 #include<iostream> #include<cstdio> #include<cstring&g ...

  3. VS中添加配置X86平台

    最近IIS发布程序时,总是容易碰到下面的错误.这个错误网上绝大部分都是提出在VS把解决方案设置为在X86平台生成,然后再发布.但是查看应用程序后发现没有X86平台选项,下面是添加X86目标平台的方法.

  4. mysql innodb 的 逻辑存储结构

    如上图: innodb 的 逻辑存储单元分成 表空间,段,区,页 4个等级 默认情况下,一个数据库 所有变共享一个 默认的表空间(tablespan).可以指定每个表一个表空间. 一个表空间管理着 多 ...

  5. PAT甲级——A1017 Queueing at Bank

    Suppose a bank has K windows open for service. There is a yellow line in front of the windows which ...

  6. LeetCode简单算法之分割平衡字符串 #1221

    在一个「平衡字符串」中,'L' 和 'R' 字符的数量是相同的. 给出一个平衡字符串 s,请你将它分割成尽可能多的平衡字符串. 返回可以通过分割得到的平衡字符串的最大数量. 示例 1: 输入:s = ...

  7. diango中orm的惰性机制

    那么首先要知道什么是ORM 专业化的角度来说:叫对象关系映射(Object-Relation Mapping)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 那具体ORM是什么呢?:( ...

  8. 855. Exam Room

    维护一个数据结构要满足:一个教室线性排列的座位 0 ... N-1 调用seat 入座一个距离最近学生最远的座位 调用leave x 离座一个位置为x的学生 由于N最多是 10e9 所以选择维护 学生 ...

  9. 5+App 基于HTML、JS、CSS编写的运行于手机端的App（DCloud开发）

    HTML5 Plus移动App(5+App) 工具: 开发工具HBuilder下载下载地址 开发工具HBuilderX下载下载地址(替代HBuilder) 框架: uni-app :是一个使用 Vue ...

  10. Luogu P2678 跳石头(二分)

    P2678 跳石头 题意 题目背景 一年一度的"跳石头"比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起 ...