*  能够使用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. 跟我一起在ubuntu中安装docker

    卸载旧版本 $ sudo apt-get remove docker docker-engine docker.io 查看ubuntu版本 设置安装源 通过如下步骤,设置安装源仓库,这里我们使用阿里源 ...

  2. Python-爬虫实战 简单爬取豆瓣top250电影保存到本地

    爬虫原理 发送数据 获取数据 解析数据 保存数据 requests请求库 res = requests.get(url="目标网站地址") 获取二进制流方法:res.content ...

  3. sas单变量的特征分析

    sas单变量的特征分析 大炮,我有个烦恼,我领导最近老叫我单变量结合因变量分析,但是都是分段分析,我总是写proc sql然后group by ,但是这个过程好无聊啊,有木有什么新的代码,让我可以分析 ...

  4. Filter - 过滤敏感词汇(动态代理)

    /** * 敏感词汇过滤器 */ @WebFilter("/*") public class SensitiveWordsFilter implements Filter { pu ...

  5. DP学习之路（1） 01背包

    动态规划是算法中一门很重要的思想,其通过对每一步的假设规划,不停的寻找最优最有利的解决方案,然后一步一步求解出来. 而01背包是其中最基本的一种dp思想,其题目一般为给定一个容量为V的背包,然后有n件 ...

  6. 左神算法书籍《程序员代码面试指南》——1_10最大值减去最小值小于或等于num的子数组数量

    [题目]给定数组arr和整数num,共返回有多少个子数组满足如下情况:max(arr[i.j]) - min(arr[i.j]) <= num max(arfi.j])表示子数组ar[ij]中的 ...

  7. css3之文本和颜色功能之text-overflow,word-wrap

    语法 text-overflow: clip|ellipsis|string; clip修剪文本.ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本. 效果 ...

  8. qq邮箱html邮件，图片不显示的问题

    测试无论是站外的图片还是站内的图片,qq邮箱都会过滤图片,导致显示不出来. 解决办法:图片base64编码.效果图: 代码: <div class="container"&g ...

  9. springmvc：入门环境搭建

    引入依赖(pom.xml): <!-- 版本锁定 --> <properties> <spring.version>5.0.2.RELEASE</spring ...

  10. 单元测试神器Mockito

    Mockit是一种mock工具/框架.mock可以模拟各种各样的对象,从而代替真正的对象做出希望的响应 1.工程中引入Mockito #以gradle的方式为例 testCompile("o ...