1、offset()获取匹配元素在相对浏览器窗口的偏移量　　返回一个对象，包括两个属性。left:相对浏览器窗口左边的距离。top:相对浏览器顶部的距离。

　  $("#div1").offset().left;　　//返回id为div1相对于浏览器窗口最左边的距离

　  $("#div1").offset().top;　　//返回id为div1相对于浏览器窗口最顶部的距离

 function showDiv(obj) {

 　　jQuery("#divShow").css("left", jQuery(obj).offset().left);　　//设置#divShow与浏览器的左距离为文本框距离浏览器左边的距离。

 　　jQuery("#divShow").css("top", jQuery(obj).offset().top + jQuery(obj).outerHeight());　　//设置#divShow距离顶部的距离为文本框距离顶部的距离加上自身高度。

 　　jQuery("#divShow").show();

 }

 <input type="text" value="ok" onclick="showDiv(this);" style="margin-left:100px;" />

 <div id="divShow" style="display:none;position:absolute;">2010-03-22</div>

2、position()获取匹配元素在相对父元素的偏移量，返回一个对象，包括两个属性。left:相对父元素最左边的距离。top:相对父元素最右边的距离。只对可见元素有效。

 <head>

     <title></title>

     <script src="jquery-1.7.1.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#btn1").click(function () {

                 var left = $("#div2").position().left;  //21.11111

                 var top = $("#div2").position().top;    //33.33333

                 alert("距离父元素顶部的距离是：" + left + "; 距离父元素左边的距离是:" + top);

             })

         })

     </script>

 </head>

 <body>

     <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; position:relative;">

         <div id="div2" style="width:100px;height:200px; background-color:Green; position:absolute; left:22px; top:34px;">我是一个div元素</div>

         <input id="btn1" type="button" value="查看" />

     </div>

 </body>

　　以上代码相当于javascript中的:

        function fun1() {

            var left = document.getElementById("div2").offsetLeft;　　//21

            var top = document.getElementById("div2").offsetTop;　　　//33

            alert("距离父元素顶部的距离是：" + left + "; 距离父元素左边的距离是:" + top);

        }

3、scrollTop() 　　　获取匹配元素距离滚动条顶部的距离，说白了就是边框的最顶部与当前显示出来的最顶部的距离。

　  scrollTop(val)　　设置匹配元素距离滚动条顶部的距离

　　该属性常常配合scroll()事件一起使用，能够实现元素随滚动条的滚动而滚动，类似于漂浮广告效果。

　　$(this).scroll(function(){

　　$("#div1").css("top", $(document).scrollTop());　　//注意id为div1的div要设置为绝对定位。如果是底部漂浮，只需要$(document).scrollTop()加上相应的垂直距离就可以了。

　　})

4、scrollLeft()　　   获取匹配元素距离滚动条顶部的距离,说白了就是边框的最左边与当前显示出来的最左边的距离。

　  scrollLeft(val)　 设置匹配元素距离滚动条顶部的距离

 <head>

     <title></title>

     <script src="jquery-1.7.1.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#btn1").click(function () {

                 var scrollTop = $("#div1").scrollTop();

                 var scrollLeft = $("#div1").scrollLeft();

                 alert("显示的最顶部距离真正的顶部的距离是：" + scrollTop + "; 显示的最左边距离真正的左边的距离是:" + scrollLeft);

             })

         })

     </script>

 </head>

 <body>

     <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; overflow:scroll;">

         <div style="width:400px;height:800px;/*撑出滚动条*/">我是一个div元素</div>

         <input id="btn1" type="button" value="查看" />

     </div>

 </body>

5、height()　　　　获取匹配元素的高度值　　//不包括padding,不包括边框 val可以是字符串"300px"、也可以是数字300，还可以是一个函数，返回值作为参数

　  height(val)　　  设置匹配元素的高度值　　

6、 width()　　　　 获取匹配元素的宽度值　　//不包括padding,不包括边框

　　width(val)　　   设置匹配元素的宽度值

 <head>

     <title></title>

     <script src="jquery-1.7.1.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#btn1").click(function () {

                 var Width = $("#div1").width();   //200 css的width属性，不包括内边距、边框和外边距

                 var Height = $("#div1").height(); //400 css的height属性，不包括内边距、边框和外边距

                 alert("div1的宽度是：" + Width + "; div1的高度是：" + Height);

             })

         })

     </script>

 </head>

 <body>

     <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">

         我是一个div元素

         <input id="btn1" type="button" value="查看" />

     </div>

 </body>

7、innerHeight()　　　　获取匹配元素的高度值  　//包括padding但不包括border

　  innerHenght(val)　　设置匹配元素的高度值

8、innerWidth() 　　　　获取匹配元素的宽度值　　//包括padding但不包括border

　  innerWidth(val)　　   设置匹配元素的宽度值

 <head>

     <title></title>

     <script src="jquery-1.7.1.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#btn1").click(function () {

                 var innerWidth = $("#div1").innerWidth();   //240 包括边框和内边距

                 var innerHeight = $("#div1").innerHeight(); //440 包括边框和内边距

                 alert("div1的宽度是：" + innerWidth + "; div1的高度是：" + innerHeight);

             })

         })

     </script>

 </head>

 <body>

     <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">

         我是一个div元素

         <input id="btn1" type="button" value="查看" />

     </div>

 </body>

　　以上的主jQuery相当于代码(javascript版)：

function fun1() {

　　var innerWidth = document.getElementById("div1").clientWidth;

　　var innerHeight = document.getElementById("div1").clientHeight;

　　alert("div1的宽度是：" + innerWidth + "div1的高度是:" + innerHeight);

}

9、 outerHeight()　　　　获取元素的高度值　　//包括padding和border

　　outerHeight(val)　　　　设置元素的高度值　　

　　还可以接受一个参数，该参数代表是否计算外边距，如果为true则表示计算外边距。

10、outerWidth()　　　　获取匹配元素的宽度值　　//(包括padding和border)

　    outerWidth()　　　  设置匹配元素的宽度值

　　还可以接受一个参数，该参数代表是否计算外边距，如果为true则表示计算外边距。

 <head>

     <title></title>

     <script src="jquery-1.7.1.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#btn1").click(function () {

                 var outerWidth = $("#div1").outerWidth();   //260包括边框和内边距

                 var outerHeight = $("#div1").outerHeight(); //460 包括边框和内边距

                 alert("div1的宽度是：" + outerWidth + "; div1的高度是：" + outerHeight);

                 var outerWidth1 = $("#div1").outerWidth(true);   //320 包括边框、外边距和内边距(也就是元素实际占用的大小)

                 var outerHeight1 = $("#div1").outerHeight(true); //520 包括边框、外边距和内边距(也就是元素实际占用的大小)

                 alert("div1的宽度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1);

             })

         })

     </script>

 </head>

 <body>

     <div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">

         我是一个div元素

         <input id="btn1" type="button" value="查看" />

     </div>

 </body>　

　　　在jQuery的参数不为真的情况下，以上jQuery的主代码相当于：

        function fun1() {

            var outerWidth = document.getElementById("div1").offsetWidth;

            var outerHeight = document.getElementById("div1").offsetHeight;

            alert("div1的宽度是：" + outerWidth + "; div1的高度是：" + outerHeight);

        }

　　　　如果参数为真的情况下，就相当于javascript:

        function fun1() {

            var div1 = document.getElementById("div1");

            var outerWidth1 = div1.offsetWidth + parseInt(div1.style.marginLeft) + parseInt(div1.style.marginRight);

            var outerHeight1 = div1.offsetHeight + parseInt(div1.style.marginTop) + parseInt(div1.style.marginBottom);

            alert("div1的宽度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1);

        }

javascript之位置的更多相关文章

  1. JavaScript放置位置区别

    JavaScript放置位置区别 页面中的脚本会在页面载入浏览器后立即执行.我们并不总希望这样.有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本. 位于 head ...

  2. JavaScript代码-----位置决定结果

    刚学JavaScript的时候,即使照着书上的代码敲一遍,运行的时候,得到的结果要么总是和书上的结果不同,要么是没产生效果.学到后面,才明白到其实程序的代码是没错的,错误的是代码的位置! 首先看下面这 ...

  3. JavaScript 书写位置

    类似于 CSS 样式,JavaScript 也有三种不同位置的书写方式. 1.写在行内 <input type="button" value="按钮" o ...

  4. 前端优化分析 之 javascript引用位置优化

    在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢 我通过firebug进行了下简单的分析 看下图  本页面首尾都存在javascript代码 我们分析得出 1.整个页面文档 ...

  5. JavaScript DOM位置尺寸API

    我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeig ...

  6. Javascript书写位置

    1.行内式js(很少使用) 以on开头,如onclick HTML中推荐双引号,JS推荐单引号 2.内嵌式js(常用) <script> alert('hello world'); < ...

  7. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  8. Python 【第八章】：JavaScript 、Dom、jQuery

    JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容 变量: var a =123 局部变量 a = 123 全局变量 作用域 ...

  9. web前端基础知识-（三）JavaScript基本操作

    JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. JavaScrip ...

随机推荐

  1. 教孩子学编程 Python

    教孩子学编程   Python 目录 第1 章 Python 基础:认识环境 111 认识Python 312 用Python 编写程序 513 运行Python 程序 514 本章小结 615 编程 ...

  2. git切换到某个tag, 从tag切换回当前分支

    git clone 整个仓库后使用,以下命令就可以取得该 tag 对应的代码了 git checkout tag_name 但是,这时候 git 可能会提示你当前处于一个“detached HEAD& ...

  3. c# .net 查找并安装CA根证书

    https CA根证书 用的是证书指纹来查找. 在用 collection.Find 之前 ,X509Store 一定要打开(Open),否则找到的数量(X509Certificate2Collect ...

  4. 【GStreamer开发】GStreamer播放教程02——字幕管理

    目标 这篇教程和上一篇非常相似,但不是切换音频流,而是字幕了.这次我们会展示: 如何选择选择字幕流 如何引入外部的字幕 如何客制化字幕使用的字体 介绍 我们都知道一个文件可以有多个音视频流并且可以使用 ...

  5. 在 FR 网络配置 OSPF

    一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.掌握配置帧中继的基本方法. 2.掌握在路由器中模拟帧中继交换机的方法. 3.掌握 NBMA 网络中 OSPF  ...

  6. python glob删除目录下的文件

    使用glob匹配目录下的文件 import os import glob path="./" for infile in glob.glob(os.path.join(path,& ...

  7. [转帖]Linux内核系统体系概述

    Linux内核系统体系概述 https://www.cnblogs.com/alantu2018/p/8447369.html Linux 内核主要由 5 个模块构成,它们分别是: 进程调度模块 用来 ...

  8. RocketMq 集群方式搭建 步骤教学包教包会

    mq集群方式搭建 有段时间没写这些技术文章了, 今天抽空写一点,不然自己都快忘记了 这篇文章记录了rocketmq 集群方式搭建的过程, 也是自己半天的成果记录吧! 感兴趣的朋友点个赞在走呗! 好了, ...

  9. nginx与php配置用户问题

    当配置nginx的nginx.conf 时,可参照如下配置: server { listen 80; server_name www.advancephp2017.com; access_log lo ...

  10. Golang常用快捷键以及常见快捷键冲突

    配置快捷键: 跳转到函数定义 回退 查找函数使用 File/Settings/Keymap 工具: gofmt/golint File/Settings/Tools/File Watchers gol ...