<!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. ping通IP,telnet 3306不通

    一个同事装的MySQL数据库,无法连接.​​1.查看权限​​2.查看防火墙​​检查用户权限,防火墙都没问题,就是无法连接,能ping通,但是telnet 3306 端口无法成功.​​检查了下数据库配置 ...

  2. rman 命令

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...

  3. Java Collections Source Code Series 2 ---接口

    废话开篇 自己学完Java Collections框架之后,其中的一个较大的收获就是接口对于层次的重要性.Java Collections的最终实现至少有几十个,其中很多都有非常相似的功能(metho ...

  4. Android 设计模式

    简介 项目开发中发现问题.解决问题这个过程中会出现很多问题,比如重复出现.某个问题的遗留,这些问题的本质就是设计模式.今天记录设计模式的知识点. 内容 在java以及其他的面向对象设计模式中,类与类之 ...

  5. 使用golang+java实现基于ecb的3eds加解密

    http://www.100hack.com/2014/04/14/golang%E4%B8%AD%E7%9A%84des%E5%8A%A0%E5%AF%86ecb%E6%A8%A1%E5%BC%8F ...

  6. win7 mount到Linux下无法分配内存的问题（Cannot allocate memory）

    如题,我在win7系统下共享目录,mount到linux下,进行编译或者某些操作,出现Cannot allocate memory提示. 修改以下两个键值,然后重启server服务,可以解决这个问题: ...

  7. NPOI导出Excel文件，对单元格的一些设置

    HSSFWorkbook book = new HSSFWorkbook(); MemoryStream ms = new MemoryStream(); ISheet sheet = book.Cr ...

  8. Android Jni变量对照表

    字符 Java类型 C类型 V      void            void Z       jboolean     boolean I        jint              in ...

  9. mongodb修改器

    mongodb修改器 转载自:http://blog.csdn.net/mcpang/article/details/7752736 mongodb修改器(\(inc/\)set/\(unset/\) ...

  10. 双系统修改启动项顺序&&&修改开机启动等待时间

    1. 双系统修改启动项顺序 更改/etc/grub.d目录 下的文件名是可行的          默认情况下Windows 7对应的文件名是30_os-prober,第一个linux系统对应的是10- ...