*  能够使用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. ODOO 新API修饰符

    Odoo8中,API接口分为traditaional style和record style两种类型: traditional style指的就是我们在7.0中使用的类型,def(self,cr,uid ...

  2. java虚拟机(十二)--可视化工具分析GC日志

    在上篇博客中,我们学习了Parallel.CMS.G1三种垃圾收集器的日志格式,本次我们通过工具去分析日志,会更加的直观 日志格式博客地址:java虚拟机(十一)--GC日志分析 GCeasy: 这是 ...

  3. 记一次server 2008 R2的按装过程

    项目上一直在用的dell务器在去年年底突然出现系统过期,导致c盘的东西全部丢失.我们用激活工具激活,还是没能找回丢失的东西. 为了装这个系统,跟同事一起折腾了好些次,最后发现安装服务器的时候有个磁盘阵 ...

  4. Android根据联系人姓名首字符顺序读取通讯录

      Android根据联系人姓名首字符顺序读取通讯录 版权声明:本文为Zhang Phil原创文章,欢迎转载!转载请注明出处:http://blog.csdn.net/zhangphil 本文给出了A ...

  5. vue项目打包部署到服务器，静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  6. C# 统一对 try...catch 的调用，方便保存错误日志

    每个优秀的开发人员,应该尽可能保证程序稳定运行,在确实不需要使用try...catch的地方尽尽量不要使用以提高程序性能. 但是我们不可能保证每段代码不会出错,由于出错引起的用户界面并不友好,而且有可 ...

  7. 关于SQL查询效率 主要针对sql server

    1.关于SQL查询效率,100w数据,查询只要1秒,与您分享:机器情况p4: 2.4内存: 1 Gos: windows 2003数据库: ms sql server 2000目的: 查询性能测试,比 ...

  8. 【python之路26】字符串之格式化%和format

    Python基础之杂货铺   字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式, ...

  9. zoj2562 反素数

    /* 这题1 <= n <= 1016,暴力肯定是TLM,所以看了大牛求解小于N的反素数的算法,思路大致是这样的: 性质1:一个反素数的质因子一定是从2开始的若干个连续质数. 因此可以枚举 ...

  10. 工控安全入门（二）—— S7comm协议

    在上一次的文章中我们介绍了施耐德公司的协议modbus,这次我们把目标转向私有协议,来看看另一家巨头西门子的S7comm.首先要说明,这篇文章中的内容有笔者自己的探索,有大佬们的成果,但由于S7com ...