JavaScript DOM 利用样式实现元素移动位置

最新推荐文章于 2023-06-13 17:18:39 发布
最新推荐文章于 2023-06-13 17:18:39 发布
阅读量2.1k 收藏
点赞数
分类专栏： JavaScript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ios0213/article/details/51468937
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo1{
	width:300px;
	height:200px;
	border:3px solid #F00;
	position:absolute;
	top:0;
	left:0;
}
</style>
<script>

function ceh1(element)
{
	element.style.color="#0f0";
	element.style.backgroundColor="#a4c639";
	movement=setTimeout("ceh3()",1000);
}
function ceh2(element)
{
	element.style.color="";
	element.style.backgroundColor="";
}
function ceh3()
{
	element=document.getElementById("demo1");
	element.style.position="absolute";
	element.style.top="300px";
	element.style.left="600px";
}
</script>
</head>

<body>
<div id="demo1" onMouseOver="ceh1(this)" onMouseOut="ceh2(this)">
</div>
</body>
</html>
注意函数有没有写错，否则得不到执行。
ios0213
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS DOM 鼠标事件默认事件 鼠标右键 事件覆盖 添加事件监听 （一）
MrHuBingo的博客
06-06 2158
我们在使用原生JS 操作DOM 会遇到各种各样的问题 如何去解决他们 就需要一些经验了 当我们在html 中 定义一个DIV 命名为 #demo 时 给它写出两个一摸一样的点击事件时候 会发生覆盖事件 如图 let demo = document.getElementById('demo') demo.onclick = function (){ console.log(111)
JS——DOM节点操作
chihuomiao的博客
05-13 1171
主要包括 创建添加插入替换删除克隆 创建：document.createElement（'标签名'） 创造一个指定标签元素，返回的是一个创建好的元素节点、 如果浏览器无法识别标签名就会生成一个未知HTML元素 一般流程---- 1创建空对象（只能用document调用） 2为空元素添加关键属性和内容 3将空元素加载到dom树中 添加：父节点.appendChild（子节点） 把这个子节点追加到父节点下所有子元素的末尾，如果加入的子节点已经存在DOM树中，那么就会改变该子节点的位置 .
原生html上下滑动,原生js操作dom实现上下左右移动
weixin_35698069的博客
05-31 438
Document*{padding: 0;margin:0;}html,body,main{height: 100%;width: 100%;}.box{height: 20px;width: 20px;border-radius: 50%;background:red;position: absolute;left: 0;right: 0;}.lookFood{font-size: 20px;p...
dom-move:将子节点从一个 DOM 节点移动到另一个节点
07-09
dom-move 将子元素从 DOM 节点移动到另一个 dom 节点。 用法 move ( source , destination ) ; source所有子节点都将被删除，并附加到destination 。 返回destination节点，因此您可以执行以下操作： var content = move ( source , document . createElement ( 'div' ) ) ; 如果省略第二个参数，则会创建一个文档片段： var fragment = move ( source ) ;
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
10-20
主要介绍了Javascript DOM事件操作,结合实例形式总结分析了javascript监听鼠标点击、释放，悬停、离开等操作技巧,需要的朋友可以参考下
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
09-18
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
js复习：移动元素offsetLeft,offsetTop，10%，30%, left
qq_51813155的博客
11-08 1119
移动元素1.我们怎么移动元素？ 1.我们怎么移动元素？ 1.给元素绝对定位 ，有left和right.
js实现页面元素的拖拽
zongmaomx的博客
06-22 3014
平时在我们页面上，经常会悬浮着一些功能按钮，如帮助，联系客服等，按钮的显示比较简单，用定位悬浮在自己需要的位置上就行，比如下面的页面上我们展示一个帮助的按钮，用户点击后可以展示一些帮助的信息： 代码： 但是这样定位一般是固定在这个位置，如果这时候刚好【帮助按钮】挡住了这个位置原本有的其他操作按钮，那么我们就需要能够把【帮助按钮】拖开，不影响原本页面上的操作。一般实现拖动的思路是：在【帮助按钮】上鼠标按下时，记录下当前的坐标，以及原本相对于父元素的位置，然后监听【帮助按钮】的鼠标移动事件【onmousem
使用js实现数组上移和下移，交换位置以及将目标元素移动到指定位置， 其余元素不变
weixin_50236973的博客
06-13 1797
【代码】使用js实现数组上移和下移。
JS移动某些元素到指定位置
热门推荐
MOONCOM的博客
06-15 1万+
一、点击按钮实现页面中的某些元素移动到 指定区域（根据用户输入）/ 规定区域（代码中写死的） 通过 document.getElementById("demo").appendChild(document.getElementById("test")); 来实现 注意：1、也可以通过 getElementsByClassName() 等来实现； 2、这里的事件，除了appendChild
再谈javascript 动态添加样式规则 W3C校检
12-04
直接导入一个新的样式表是最好的选择，但有些情况就行不通，如我们做一个能拖动的DIV，从设置样式的角度看，就是把它绝对定位，以防影响原来的文档流，然后一点点改变其top与left的值实现移动的效果。由于拖动是有...
JavaScript实现拖拽盒子效果
11-21
本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码，供大家参考，具体内容如下 实现效果： 1.单击关闭，关闭盒子 2.点击左上方‘点击注册’，打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不...
Fortris:俄罗斯方块的 JavaScript 实现。 难免让人上瘾！
06-13
Fortris 使用JavaScript构建，并使用jQuery DOM 操作和CSS样式呈现。 面向对象设计 对于像 Fortris 这样的游戏来说，面向对象是必须的。 由存储的。 跟踪其块。 使用通过它们的形状进一步定义，因为块的每个需要自己...
基于JavaScript 实现拖放功能
01-19
HTML 的拖放 API 依赖 DOM 事件模型，获取拖放和放置元素的相关信息，以此实现拖放功能。我们只需要注册很少几个事件监听器，就能把任何元素变成可拖动或可放置的。 拖放 API 除了提供基本的拖放功能接口外，还可以...
easydropdown:一个轻量级的库，用于构建美观的样式元素
05-14
元素API * 全面的键盘支持（导航，搜索和选择） 发出本地change事件增强的占位符支持表单重置和验证支持碰撞检测实时更新退回到移动设备上的本机UI CSS模块支持TypeScript /智能支持符合ARIA的标记支持IE9 +和所有...
JavaScript DOM中获取元素节点的父节点和父节点名
ios0213的专栏
06-17 5866
例如当我们要获取id="test1"的父节点的时候，可以这样： var node=documentElementById("test1"); var parentnode=node.parentNode; 获取父节点名可以这样： var parentnodeName=node.parentNode.nodeName;
JavaScript DOM 中创建元素并设置属性
ios0213的专栏
05-23 4214
如下面： var para=document.createElement("p"); var node=document.createTextNode("hao123"); para.appendChild(node); document.body.appendChild(para); 可以在任何时候对新创建的元素使用DOM方法，对元素任意属性进行设置，即使在插入文档之前，如： var
循环遍历form元素里的表单元素
ios0213的专栏
06-24 3167
JavaScript DOM 中setAttribute()的使用 以及点击鼠标返回函数的处理
ios0213的专栏
05-18 2694
无标题文档 #demo{ position:absolute; top:210px; left:250px; } ul{ margin:0; padding-left:170px; list-style-type:none; } li{ float:left; margin-right:70px; } li:hover{ border-bottom:3px so
js如何dom元素往下移动150px
最新发布
09-26
### 回答1： 你可以使用JavaScript中的DOM操作来实现此功能。具体的代码如下： ```javascript var element = document.getElementById("example"); // 获取需要移动的元素 element.style.position = "relative"; // 设置元素的定位方式为相对定位 element.style.top = "150px"; // 设置元素相对于原始位置向下移动150px ``` 这里假设需要移动的元素的id是example。你可以根据实际情况进行修改。 ### 回答2： 要让JavaScript中的DOM元素向下移动150像素，可以使用style属性来修改元素的位置。以下是一种简单的方法： 首先，我们需要使用document.querySelector()方法或其他选择器来获取要移动的元素。例如，如果我们要移动id为"myElement"的元素，可以使用以下代码获取该元素： ```javascript var element = document.querySelector("#myElement"); ``` 接下来，我们可以使用style.top属性来将元素向下移动。首先，我们需要获取元素当前的top偏移量。可以使用parseInt()函数将style.top的字符串值转换为整数。然后，将该值加上150，表示下移150像素，并将结果转换回字符串。最后，将新的top偏移量赋值给元素的style.top。以下是完整的代码示例： ```javascript var element = document.querySelector("#myElement"); var currentTop = parseInt(element.style.top) || 0; var newTop = currentTop + 150; element.style.top = newTop + "px"; ``` 上述代码首先获取了要移动的元素，然后使用parseInt()函数获取元素当前的top偏移量。如果元素未设置top属性，则返回0。然后，将当前偏移量加上150，并将新的偏移量赋值给元素的style.top属性，加上"px"单位以表示像素。这将使元素向下移动150像素。 请注意，该方法将移动元素相对于其当前位置的指定像素，而不是相对于文档的顶部。如果要相对于文档顶部移动元素，可以将元素的position属性设置为"absolute"，并使用style.top属性来移动元素。 ### 回答3： 要将一个DOM元素往下移动150px，可以使用JavaScript来操作元素的CSS样式。以下是一种实现的方法： 1. 首先，需要获取要移动的元素。可以通过document.querySelector()或document.getElementById()等方法获取到需要移动的元素，例如： ``` const element = document.querySelector('.target-element'); ``` 2. 接下来，可以使用元素的style属性来修改元素的CSS样式。需要注意的是，需要使用字符串形式指定要移动的距离并加上单位"px"，例如： ``` element.style.top = '150px'; // 指定元素的top属性为"150px" ``` 3. 这样就可以将元素向下移动150px了。 完整的代码示例如下： ``` const element = document.querySelector('.target-element'); element.style.top = '150px'; ``` 以上就是使用JavaScript将一个DOM元素往下移动150px的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值