<!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. ORACLE-12C-RAC INSTALL

    OS: Oracle Linux Server release 5.7 DB: 12.1.0.1.0 挂载镜像:mkdir /media/diskmount /dev/cdrom /media/dis ...

  2. Oracle ClusterwarePRCT-1011 : Failed to run "oifcfg".&nb

    OS: Oracle Linux Server release 6.3 DB: Oracle 11.2.0.3 在oracle-linux6.3安装11g RAC,在安装软件时候提示: An inte ...

  3. android开发系列之代码整洁之道

    说起代码整洁之道,想必大家想到更多的是那本经典重构书籍.没错,记得当时自己读那本书的时候,一边结合项目实战,一边结合书中的讲解,确实学到了很多东西,对我自己的编码风格影响极深.随着时间的流逝,书中很多 ...

  4. Nginx Gzip 压缩配置

    Nginx Gzip 压缩配置 随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-Z ...

  5. Android编程: 界面组成、事件监听器

    学习知识:界面组成.事件监听器 ====界面组成==== 1.用户界面的基本组件叫做View,都是继承android.view.View类,Android里面预定义很多基本的界面组件,比如 Butto ...

  6. powerdesigner 技巧

    1.修改建表脚本生成规则.如果每个表格都有相同的字段,可以如下修改: Database -> Edit Current DBMS 展开 Script -> Object -> Tab ...

  7. Log4j的常见用法

    对于log4j,一般常用的只要保存如下的内容为属性文件即可: #log4j.rootLogger=DEBUG,A1,R log4j.rootLogger=INFO,A1,R log4j.appende ...

  8. Sprint会议-初步组织划分

    主题:Spring冲刺计划会议,组员已认领方式领取任务,对个人任务进行详细划分. 日期:2015.4.26 地点:学一食堂二楼 与会人员:王雪青.陆宇.徐擎天.张文冬.赵建松 索引表 因早期任务的认领 ...

  9. 如何用pdfbox-app-1.8.10.jar批处理将pdf文档转换成text文档

    1.首先下载pdfbox-app-1.8.10.jar(下载地址:http://pdfbox.apache.org/download.html) 2.将pdfbox-app-1.8.10.jar加载到 ...

  10. The income statement

    The income statement measures performance over some period  of time,usually a quarter or a year.The ...