jquery怎么设置元素的位置
时间：2022-05-28 [网络编程]作者：fabuyuan 浏览：8 次
设置方法：1、用offset()设置元素相对于文档的偏移坐标，语法“元素对象.offset({top:偏移值,left:偏移值})”；2、用scrollTop()设置元素垂直滚动条位置；3、用scrollLeft()设置元素水平滚动条位置。
本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery设置元素位置的多种方法
1、使用offset()
offset() 方法可设置被选元素相对于文档的偏移坐标。
$(selector).offset({top:value,left:value})规定以像素为单位的 top 和 left 坐标。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
p {
width:150px;
background-color:pink;
padding: 5px;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").offset({
top: 200,
left: 200
});
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>设置P元素的偏移坐标</button>
</body>
</html>2、使用scrollTop()
scrollTop() 方法可设置被选元素的垂直滚动条位置。
$(selector).scrollTop(position)
提示：当滚动条位于最顶部时，位置是 0。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").scrollTop(100);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:150px;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.
</div><br>
<button>垂直滚动条的位置设置为100px</button>
</body>
</html>3、使用使用scrollLeft()
scrollLeft() 可以设置匹配元素相对滚动条左侧的偏移，即水平滚动条的位置。
$(selector).scrollLeft(position)
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").scrollLeft(100);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div><br>
<button>水平滚动条的位置设置为100 px</button>
</body>
</html>以上就是jquery怎么设置元素的位置的详细内容，更多请关注站长家园其它相关文章！
本文标签： jquery
转载请注明来源：jquery怎么设置元素的位置
本文永久链接地址：https://www.adminjie.com/post/12910.html
免责声明：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
附：
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
版权声明：
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的，若有侵犯你的权益请：提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后，情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥？PHP-RSA2签名验证怎么实现？
- app是什么应用程序的简称
- 华为dubal20是什么型号
- 小程序大小超限除了分包还能怎么做？如何避免和解决大小限制？
- 电脑显示信号线无连接是什么意思
- ana an00华为是什么型号
- html5中onclick是什么意思
- 超清视效是什么意思
- html5的标题标记一共有几个等级
- 我国自行设计研制的银河II型计算机是什么
- 最新文章
-
-
docker是容器吗
docker不是容器；容器是打包代码及其所有依赖的软件的标准单元，用于开发、交付和部署，使应用可以从一个环境快速可靠地运行到另一个环境，而docker则是容器技...
-
Github 上 8 个不可错过的 Vue 项目，快来收藏！！
本篇文章给大家整理分享8个GitHub上很棒的的Vue项目，都是非常棒的项目，希望当中有您想要收藏的那一个。Github上8个很棒的Vue项目：Ma...
-
分享一个有趣的php版本的扫雷！
本文给大家分享网友写的一个PHP版本的扫雷，挺有意思的，边玩边学习~github地址：https://github.com/maxiao64/MineWeepe...
-
docker容器重启后数据会丢吗
docker容器重启后数据会丢失的；但是可以利用volume或者“datacontainer”来实现数据持久化，在容器关闭之后可以利用“-v”或者“–volu...
-
javascript可以对事件作出响应吗
javascript可以对事件作出响应，因为可以将JavaScript设置为当某事件发生时才会被执行；事件也即发生在html元素上的事情，当在html页面使用J...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确，只是为了方便说明。后有（未安装），201？...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做，因为pop操作是原子的，即使有很多用户同时到达，也是依次执行，推荐使用。实现步骤第一步，先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成：Oracle数据库和数据库实例。Oracle是一种数据库管理系统，是一种关系型的数据库管理系统。我们用这些高级权限账号...
-
