<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #div1 {

            width: 100px;

            height: 100px;

            background: #000000;

            padding: 50px;

            border: 20px solid red;

            margin: 30px;

        }

    </style>

</head>

<body>

    <div id="div1">

    </div>

    <script src="../Script/jquery-2.1.1.js"></script>

    <script type="text/javascript">

        var oDiv = document.getElementById('div1');

        oDiv.offsetHeight;//带border和带padding的高；

        oDiv.clientHeight;//带padding，不带border的高

        $("#div").height();//内容的高

        $("#div1").innerHeight();//相当于clientHeight;

        $("#div1").outerHeight();//相当于offsetHeight;

        $("#div1").outerHeight(true);//相当于带margin，padding，border的

        /*获取样式对象属性*/

        var oStyle = getComputedStyle(oDiv, null);//获取所有的样式对象

        //第一个参数是对象，第二个参数是获取哪一个，weinull就是所有的

        console.log(oStyle.color);

        console.log(oStyle.fontFamily);//IE6.7.8是不支持的

    </script>

</body>

</html>

　　

Javascript 偏移量总结的更多相关文章

  1. javascript 偏移量

    通过四个属性可以获得元素的偏移量: 1.offsetHeight: 元素在垂直方向上占用的空间的大小,(像素).包括元素的高度,(可见的)水平滚动条的高度,上边框高度和下边框高度. 2.offsetW ...

  2. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  3. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  4. JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

    1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与 ...

  5. Javascript的二进制数据处理学习 ——nodejs环境和浏览器环境分别分析

    以前用JavaScript主要是处理常规的数字.字符串.数组对象等数据,基本没有试过用JavaScript处理二进制数据块,最近的项目中涉及到这方面的东西,就花一段时间学了下这方面的API,在此总结一 ...

  6. 关于javascript的运动教程

    一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...

  7. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  8. javascript 百度地图API - demo

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  9. 两种JavaScript的AES加密方式（可与Java相互加解密）

    由于JavaScript属于弱类型脚本语言,因此当其与强类型的后台语言进行数据交互时会产生各种问题,特别是加解密的操作.本人由于工作中遇到用js与Java进行相互加解密的问题,在网上查了很多资料及代码 ...

随机推荐

  1. .NET开源工作流RoadFlow-流程设计-保存与发布

    如果流程未设计完时可以先保存,以后再打开接着设计.点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计,则可以打开该流程继续设计: 如果流程设计完成,可以点击安装按钮来发布流程,流程安装成 ...

  2. 通过java反射实现简单的关于ＭongoDB的对象关系映射(ORM)．

    通过阅读MongoDB  3.2.1的官方文档中关于java 编程发现最新的文档并没有实现对对象到Document的映射,所以自己有了利用反射实现简单的关系映射． 1．定义抽象类:AbstractMo ...

  3. Union-SQL Server学习笔记

    1.简单笔记 数据库查询语句中,通过UNION组合查询语句,可以将两个或更多查询的结果组合为单个结果集,该结果集包含组合查询中的所有查询的全部行. 利用UNION语句可以实现将不同数据表中符合条件,不 ...

  4. [原创]从Oracle和Microsoft Sql Server迁移到PostgreSQL Plus Advanced Server

    一.了解PPAS的迁移方式1.在线迁移和离线迁移使用Migration Studio或Migration Toolkit直接向PPAS数据库进行对象定义和数据表中数据的迁移称为在线迁移,生成要迁移对象 ...

  5. hdu 2544 最短路

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2544 最短路 Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shi ...

  6. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  7. Android动画解析--XML

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  8. 如何在ios 系统 中抓包？？

    为了实现在ios系统上抓包,如下步骤: 1,设备越狱 2,在cydia-软件源-设置中改为开发者,否则有些deb搜索不到 安装如下软件:OpenSSH,OpenSSL,wget (下载工具) Apti ...

  9. VS2012 常用web.config配置解析之自定义配置节点

    在web.config文件中拥有一个用户自定义配置节点configSections,这个节点可以方便用户在web.config中随意的添加配置节点,让程序更加灵活(主要用于第三方插件的配置使用) 自定 ...

  10. [shell基础]——cut命令

    cut命令常见选项