<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
<STYLE>
</STYLE>
<script type="text/javascript" src="jquery-180minjs"></script>
<script type="text/javascript">
$ (document)ready (function ()
{
$ ('button#hide')click (function ()
{
$ ('p')toggle ();
});
if (!!$browsermsie)
{
$ ('p')css ('-webkit-transform', 'translateY(5500px)');
var x = $ ('p')css ('-webkit-transform');
x = xmatch (/\d+/g)[0] + 'px';
}
else if (!!$browserchrome)
{
$ ('p')css ('-webkit-transform', 'translateY(5500px)');
var x = $ ('p')css ('-webkit-transform');
x = xreplace (/[\,\s]+(\d+)\)$/, '$1px');
}
else if (!!$browsermozilla)
{
$ ('p')css ('-moz-transform', 'translateY(5500px)');
var x = $ ('p')css ('-moz-transform');
x = xreplace (/[\,\s]+(\d+)\)$/, '$1px');
}
alert (x);
});
</script>
</head>
<body>
<p>11111111111111</p>
<button type="button" id="hide">点击</button>
</body>
</html>
获取浏览器显示区域的高度 ：
$(window)height();
获取浏览器显示区域的宽度 ：
$(window)width();
获取页面的文档高度 ：
$(document)height();
获取页面的文档宽度 ：
$(document)width();
获取滚动条到顶部的垂直高度 ：
$(document)scrollTop();
获取滚动条到左边的垂直宽度 ：
$(document)scrollLeft();
计算元素位置和偏移量：
$(id)offset();
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
offset()方法返回的对象没有bottom属性
css里设置了就是直接用$("p")css("bottom")获取
scrolltop是jQuery中的一个方法，它可以设置 <div> 元素中滚动条的垂直偏移量，基本的用法是：
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
工具原料：jQuery、编辑器、浏览器
1、在一个有内容的div中是吸纳设置滚动条的偏移量和获取偏移量的值，代码如下：
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("btn1")click(function(){
$("div")scrollTop(100);
});
$("btn2")click(function(){
alert($("div")scrollTop()+" px");
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>
2、运行的效果如下：
点击设置为100px后的效果：
点击获取值的效果：
说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0auto，CSS自动算出左右边距，使得DIV居中。mydiv{margin:0auto;width:300px;height:200px;}但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。CSS实现水平和垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要d出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。jQuery实现水平和垂直居中jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下：$(window)resize(function(){$("mydiv")css({position:"absolute",left:($(window)width()-$("mydiv")outerWidth())/2,top:($(window)height()-$("mydiv")outerHeight())/2});});此外在页面载入时，就需要调用resize()。$(function(){$(window)resize();});此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的d出层效果中应用。
以上就是关于用jquery如何获取transform的值全部的内容，包括:用jquery如何获取transform的值、jquery 如何获取滚动条的宽度、jquery怎么获取bottom-CSDN论坛等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）