<!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. 博客导出工具(C++实现,支持sina,csdn,自定义列表)

    操作系统:windowAll 编程工具:visual studio 2013 编程语言:VC++ 最近博文更新的较频繁,为了防止账号异常引起csdn博文丢失,所以花了点时间做了个小工具来导出博文,用做 ...

  2. android开发图片分辨率问题解决方案

    dpi是什么呢? dpi是“dot per inch”的缩写,每英寸像素数. 四种密度分类: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (ex ...

  3. ios中用drawRect方法绘图的时候设置颜色

    设置画笔颜色可以直接 [[UIColor grayColor] set];就可以设置颜色.

  4. ubuntu server获取并自动设置最快镜像的方法

    一,安装方法1 add-apt-repository ppa:ossug-hychen/getfastmirrorapt-get install getfastmirror 如果添加了临时源,这样移除 ...

  5. exception -----> Typedefs & Classes

    #include <exception> Typedefs exception_ptr 一种类型,描述了一个指向异常的指针 terminate_handler 一种类型,描述了一个适合作为 ...

  6. linux系统下sd卡的备份与恢复

    linux系统下sd卡的备份与恢复 现在各种的开发板都是从sd卡上面启动的,因此大修改工作之前很有必要备份一下. 备份 在linux系统下用读卡器读取sd卡 用df -h命令看分区的路径 一般都是/d ...

  7. 内部类&匿名内部类

    内部类:如果A类需要直接访问B类中的成员,而B类又需要建立A类的对象.这时,为了方便设计和访问,直接将A类定义在B类中.就可以了.A类就称为内部类.内部类可以直接访问外部类中的成员.而外部类想要访问内 ...

  8. Windows完成端口网络模型

    GetQueuedCompletionStatus  比如此时端口上完成的是什么操作,数据是什么等,还有,系统如何做到自动填充上述的结构的,也就是说,系统怎么知道在Overlap->OpCode ...

  9. RHEL6.4找回root密码的方法

    1.先在系统启动的时候提示:press any key to enter menu 时按下e键(其实其他键也可以,只不过我习惯e键而已) 2.进入如下界面: 3.按上下箭头方向键选中第二项,按e键,进 ...

  10. Zclip复制页面内容到剪贴板兼容各浏览器

    Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...