<!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. 软件工程个人作业4（课堂练习&&课堂作业）

    题目:返回一个整数数组中最大子数组的和. 要求:1.输入一个整型数组,数组里有正书和负数. 2.数组中连续的一个或者多个整数组,每个子数组都有一个和. 3.求所有子数组的和的最大值.要求时间复杂度为0 ...

  2. [备忘]Asp.net MVC 将服务端Model传递的对象转为客户端javascript对象

    <script type="text/javascript"> var jsObject = @Html.Raw(Json.Encode(Model.Objects)) ...

  3. 在线演示平台 | Highcharts中文网 （曲线图、区域图、3D图等等）

    http://www.hcharts.cn/ 在线演示平台 | Highcharts中文网

  4. R统计图

    主题:R统计图 作者:luomg 关键字:统计,R,ggplot2 1.什么是统计图? 统计图:统计图是从数据到几何对象的图形属性的一个映射 砖石重量对价格的散点图 qplot(carat,price ...

  5. Python实现ID3(信息增益)

    Python实现ID3(信息增益) 运行环境 Pyhton3 treePlotter模块(画图所需,不画图可不必) matplotlib(如果使用上面的模块必须) 计算过程 st=>start: ...

  6. JSP的编译指令

    JSP有3个编译指令,是通知JSP引擎的消息,它不直接生成输出.编译指令都有默认值,无须为每个指令设置值. 常见的编译指令有如下三个: page:针对当前页面的指令. include:指定包含另一个页 ...

  7. [LAMP]——mod_security和mod_evasive模块的安装

    系统版本:Red Hat 6 httpd版本:httpd-2.4.20 tar包:modsecurity-apache_2.5.9.tar.gz   mod_evasive_1.10.1.tar.gz ...

  8. Linux Shel高级技巧(目录)

    Linux Shell高级技巧(一) http://www.cnblogs.com/stephen-liu74/archive/2011/12/22/2271167.html一.将输入信息转换为大写字 ...

  9. PBOC规范下的java卡介绍

    JAVA卡与智能卡 什么是 JAVA 卡呢?JAVA 卡是一种可以运行 JAVA 程序的接触式微处理器智能卡.1996 年 11 月,JAVA 卡 1.0 版本的规范正式发布了.如今 JAVA 卡最新 ...

  10. Think in java备忘录

    1..new在内部类中的使用 .new可以用使用外部类对象创建一个内部类,对象 DotNew.java package com.gxf.innerclass; public class DotNew ...