Math方法详解

  1. Math.sqrt(x)    计算X开平方
  2. Math.sqrt(x,y)   计算xy
  3. Math.round(x)   计算x 四舍五入的值

getBoundingClientRect()

这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。

document.documentElement.clientTop;  // 非IE为0,IE为2

document.documentElement.clientLeft; // 非IE为0,IE为2

functiongGetRect (element) {

var rect = element.getBoundingClientRect();

var top = document.documentElement.clientTop;

var left= document.documentElement.clientLeft;

return{

top    :   rect.top - top,

bottom :   rect.bottom - top,

left   :   rect.left - left,

right  :   rect.right - left

}

}

分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。

js中的function的更多相关文章

  1. js中使用function定义类、实例化,函数的调用方法

    function Test002(name, age){ name, age, this.printInfo = function(){ //定义的公有方法 console.log(name, age ...

  2. JS中的Function对象

    Function是函数的原型,所有的函数都来源于Function,获得函数的方法有两种类型,分为动态函数和函数继承. 动态函数 创建一个Function语法: var func = new Funct ...

  3. js中 a : function(){}这是什么格式? 代表什么含义?怎样学习这样的格式?

    js中的json. 一种轻量级数据格式.json中的值是map形式的就是key->value. 具体看下边的示例; var person = { // 用 大括号括声明一个json. " ...

  4. 【微信小程序】在js中导入第三方js或自己写的js,使用外部js中的function的两种方法 import和require的区别使用方法 【外加:使用第三方js导出的默认function的调用方法】

    如下 定义了一个外部js文件,其中有一个function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync( ...

  5. 详细js中(function(window,document,undefined))的作用

    在jquery插件中我们经常看到以下这段代码 对于很多初学者来说很难明白这表示什么,下边我将为大家介绍其相应的作用. 1.代码最前面的分号,可以防止多个文件压缩合并以为其他文件最后一行语句没加分号,而 ...

  6. js中,(function(){})()的用法解析

    (function($){...})(jQuery)  含义 经常用,今天总结一下,下文摘自某网友的总结: (function($){...})(jQuery)实际上是匿名函数,不懂得朋友可以继续往下 ...

  7. js中的Function和Object

    说到构造器(condtructor).原型链(prototype),说道Function与Object,总要祭出下面这张图 1.Function是最顶层的构造器,Object是最顶层的对象 2.先有的 ...

  8. js中的(function(){})()立即执行

    ( function(){-} )() 和 ( function (){-} () ) 是两种javascript立即执行函数的常见写法,要理解立即执行函数,需要先理解一些函数的基本概念. 函数声明. ...

  9. prototype.js中Function.prototype.bind方法浅解

    prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...

随机推荐

  1. sql server在使用xp_cmdshell

    一.sql server在使用xp_cmdshell读取远程服务器上的文件时,要先将远程服务器的目录映射到本地 代码: exec master..xp_cmdshell  'net use P: \\ ...

  2. Cocos2DX新手入门笔记索引

    01--从根源种子CCNode说起 02—从Cocos2DX视角看游戏组成 03--理解HelloWorld结构 04--简单菜单使用 05--简单场景切换与精灵创建 06--触摸事件响应 07--动 ...

  3. python 中变量的命名规范

    出自:http://www.diybl.com/course/3_program/python/20111130/563643.html 模块名: 小写字母,单词之间用_分割 ad_stats.py ...

  4. 使用redis缓存加索引处理数据库百万级并发

    使用redis缓存加索引处理数据库百万级并发 前言:事先说明:在实际应用中这种做法设计需要各位读者自己设计,本文只提供一种思想.准备工作:安装后本地数redis服务器,使用mysql数据库,事先插入1 ...

  5. 漫谈项目设计&重构&性能优化

    重构的好处:重构能够改进软件设计,随着项目需求的变更,项目体积的变大早已与最初的设计大相径庭,代码结构变得凌乱.复杂,如果不进行重构,则很难添加新的功能. 1.使项目代码更容易理解很多情况下是由于项目 ...

  6. 桌面上嵌入窗口(桌面日历)原理探索(将该窗口的Owner设置成桌面的Shell 窗口,可使用SetWindowLong更改窗口的GWL_HWNDPARENT,还要使用SetWindowPos设置Z-Order)

    今天在QQ群里有人问怎样实现将自己的窗口嵌入桌面,让它和桌面融为一体,就像很多桌面日历软件那样. 我当时想到的就是建立一个Child  Window,将他的父窗口设置成桌面Shell窗口就可以了.但是 ...

  7. QT树莓派交叉编译环开发环境搭建(附多个exe工具下载链接)

    前两天入手了一块2.8’的tft液晶显示屏,于是和树莓派连了一发,成功将命令行显示在了这块小的可怜的屏幕上之后,觉得这屏幕就显示个黑白内容太浪费了,于是考虑开发一个”脸”(图形用户界面,GUI).首先 ...

  8. Java使用线程池递归压缩文件夹下面的所有子文件

    本文将介绍Java中利用线程池递归的方式压缩文件夹下面的所有子文件,具体方法如下: Gzip单个文件压缩 对于单个文件使用GZip压缩. package date0805.demo1; import ...

  9. poj1011 Sticks(dfs+剪枝)

    Sticks Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 110416   Accepted: 25331 Descrip ...

  10. Spring 的优秀工具类盘点第 1 部分

    文件资源操作 文件资源的操作是应用程序中常见的功能,如当上传一个文件后将其保存在特定目录下,从指定地址加载一个配置文件等等.我们一般使用 JDK 的 I/O 处理类完成这些操作,但对于一般的应用程序来 ...