Javascript 偏移量总结
<!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 偏移量总结的更多相关文章
- javascript 偏移量
通过四个属性可以获得元素的偏移量: 1.offsetHeight: 元素在垂直方向上占用的空间的大小,(像素).包括元素的高度,(可见的)水平滚动条的高度,上边框高度和下边框高度. 2.offsetW ...
- 掌握javascript中的最基础数据结构-----数组
这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与 ...
- Javascript的二进制数据处理学习 ——nodejs环境和浏览器环境分别分析
以前用JavaScript主要是处理常规的数字.字符串.数组对象等数据,基本没有试过用JavaScript处理二进制数据块,最近的项目中涉及到这方面的东西,就花一段时间学了下这方面的API,在此总结一 ...
- 关于javascript的运动教程
一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- javascript 百度地图API - demo
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 两种JavaScript的AES加密方式(可与Java相互加解密)
由于JavaScript属于弱类型脚本语言,因此当其与强类型的后台语言进行数据交互时会产生各种问题,特别是加解密的操作.本人由于工作中遇到用js与Java进行相互加解密的问题,在网上查了很多资料及代码 ...
随机推荐
- ORACLE-12C-RAC INSTALL
OS: Oracle Linux Server release 5.7 DB: 12.1.0.1.0 挂载镜像:mkdir /media/diskmount /dev/cdrom /media/dis ...
- 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 ...
- android开发系列之代码整洁之道
说起代码整洁之道,想必大家想到更多的是那本经典重构书籍.没错,记得当时自己读那本书的时候,一边结合项目实战,一边结合书中的讲解,确实学到了很多东西,对我自己的编码风格影响极深.随着时间的流逝,书中很多 ...
- Nginx Gzip 压缩配置
Nginx Gzip 压缩配置 随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-Z ...
- Android编程: 界面组成、事件监听器
学习知识:界面组成.事件监听器 ====界面组成==== 1.用户界面的基本组件叫做View,都是继承android.view.View类,Android里面预定义很多基本的界面组件,比如 Butto ...
- powerdesigner 技巧
1.修改建表脚本生成规则.如果每个表格都有相同的字段,可以如下修改: Database -> Edit Current DBMS 展开 Script -> Object -> Tab ...
- Log4j的常见用法
对于log4j,一般常用的只要保存如下的内容为属性文件即可: #log4j.rootLogger=DEBUG,A1,R log4j.rootLogger=INFO,A1,R log4j.appende ...
- Sprint会议-初步组织划分
主题:Spring冲刺计划会议,组员已认领方式领取任务,对个人任务进行详细划分. 日期:2015.4.26 地点:学一食堂二楼 与会人员:王雪青.陆宇.徐擎天.张文冬.赵建松 索引表 因早期任务的认领 ...
- 如何用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加载到 ...
- The income statement
The income statement measures performance over some period of time,usually a quarter or a year.The ...