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. Redis常用数据类型及各种数据类型应用和实现方式

    Redis常用数据类型: StringHashListSetSorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Redis内部内存管理中是如何描述这些不同数据类型的: 首先Red ...

  2. Nginx限制ip访问

    首先建立下面的配置文件放在nginx的conf目录下面,命名为blocksip.conf: 加入以下代码: #屏蔽soso蜘蛛IP deny 113.108.12.154; #此为搜搜蜘蛛IP den ...

  3. LODOP中table自动分页补线加border

    LODOP中可以用ADD_PRINT_TABLE.ADD_PRINT_HTM.ADD_PRINT_HTML.ADD_PRINT_TBURL等可以输出超文本的表格,超文有超过打印项高度或纸张高度自动分页 ...

  4. 老司机带大家领略MySQL中的乐观锁和悲观锁

    原文地址:https://cloud.tencent.com/developer/news/227982 为什么需要锁 在并发环境下,如果多个客户端访问同一条数据,此时就会产生数据不一致的问题,如何解 ...

  5. LeetCode 637. 二叉树的层平均值(Average of Levels in Binary Tree)

    637. 二叉树的层平均值 637. Average of Levels in Binary Tree LeetCode637. Average of Levels in Binary Tree 题目 ...

  6. 剪切板工具：Ditto

    DittoClipboard manager; 剪贴板工具https://ditto-cp.sourceforge.io/ 参考资料 https://www.liutf.com/posts/37207 ...

  7. 使用AOP进行权限验证

    首先我们定义一个切入点(匹配com.ed.controller.Seller开头的controller的所有public方法) @Pointcut("execution(public * c ...

  8. python 之 前端开发（ DOM操作）

    11.47 DOM操作 查找节点: 11.471 直接查找 document.getElementById //根据ID获取唯一一个标签 document.getElementsByClassName ...

  9. PAT(B) 1037 在霍格沃茨找零钱（Java）

    题目链接:1037 在霍格沃茨找零钱 (20 point(s)) 题目描述 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle) ...

  10. WUSTOJ 1327: Lucky Numbers（Java）

    题目链接:1327: Lucky Numbers Description A lucky number is made by the following rules: Given a positive ...