jquery-get-data(width,height,position,(top,left),scrollTop,sc

页面导航:首页 > 网络编程 > JavaScript > jquery-get-data(width,height,position,(top,left),scrollTop,sc

jquery-get-data(width,height,position,(top,left),scrollTop,sc

来源: 作者: 时间:2016-02-01 09:32 【

获取尺寸如下:heigh([val|fn])width([val|fn])innerHeight()innerWidth()outerHeight([soptions])outerWidth([options])下面就一一介绍(这里多说一下jquery中很多都是既可以返回匹配元素的值,又可以设

获取尺寸
如下:
heigh([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([soptions])
outerWidth([options])
下面就一一介绍(这里多说一下jquery中很多都是既可以返回匹配元素的值,又可以设置匹配元素值)

height()取得匹配元素当前计算的高度值(px)。
width()取得第一个匹配元素当前计算的宽度值(px)。

/此2个方法对可见和隐藏元素均有效。另外这个补白就是padding/
innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。

/此2个方法对可见和隐藏元素均有效。另外这个补白就是margin(当outerheight()值为true时才会包括margin一会用例子说明)/
outerHeight([soptions]) 获取第一个匹配元素外部高度(包括补白和边框)。
outerWidth([options]) 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
下面是一个例子:
css代码块

jquery代码块

 $(function(){
            console.log($('div').width()+'+'+$('div').innerWidth()+'+'+$('div').outerWidth());
            var k = $('div').height()+'+'+ $('div').innerHeight()+'+'+$('div').outerHeight()+'+'+$('div').outerHeight(true) ;
            alert(k);
})

代码块


 

反馈回的结果为:
alert==>>120+140+164+204
console==>>150+170+194
从( k = (′div′).height()+′+′+(‘div’).innerHeight()+’+’+(′div′).outerHeight()+′+′+(‘div’).outerHeight(true))中我们可以得到:
$(‘div’).height()为120

$(‘div’).innerHeight()=120+padding(left,right)10+10=140

$(‘div’).outerHeight()=140+border(left,right)12+12=164

$(‘div’).outerHeight(true)=164+margin(left,right)20+20=204
所以这样我们就明白了get 元素 data的用法了
这个对于以width,innerwidth,outerwidth同样相同

接下来说下get获取scroll data元素滚动数据
首先看个例子

$(document).ready(function(){
              $(document).click(function(){
                    alert($(window).scrollTop()) ;
              })
 });

span 

in pass

p_h1

dhgszfjzdggxdgxdgxfgxgxfdhdhcgdhchxcgcfftgcfgchcgghcgh

运行之后点击就可以获得滚动的上下值了。
同样的这个方法和scrollLeft([val])用法一样
不过scrollLeft([val])是获取的左右值。
另外老话长谈jquery中很多或者说是大部分吧都是可以既能够获取元素值,又能够设置元素值
如我用scrollLeft([val])设置左右值:

$(div.demo).scrollLeft(300);

最后说下offset([coordinates])和position()
关于这两个方法我用一个例子来说明
如:
jquery代码块

<script type=text/javascript src=jquery-1.8.2.min.js></script>
    <script type=text/javascript>
/*window*/window.onload = function(){
    var position_$ = function(){
        $(function(){
            var h2 = $('h2:last') ;
            var position = h2.position() ;
            $('h3').click(function(){
                var k = position.left + '+' + position.top;
                alert(k);
            });
        });
    };
    position_$();/*调用*/
    (function(){
        var h2 = $('h2:first');
        var offset = h2.offset();
        var k = offset.top + '+' + offset.left;
        $(document).click(function(){
            alert(k);
        })
    }()) /*调用*/

};/*window*/

    </script>

html代码块


啊,好美的风景啊!

你好啊!大自然

大自然:我很好!

返回来的结果是:
当点击h3 ==>>8+52.916628247070314
当点击h3或者任意地方(点击h3第二个才是我们所要的data)
==>>19.916671752929688+8
这样我们就明白其用法了
(大神勿喷啊!)

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<