Dom动态移动元素

最新推荐文章于 2024-01-11 07:06:10 发布
最新推荐文章于 2024-01-11 07:06:10 发布
阅读量653 收藏 1
点赞数
文章标签： 前端 ViewUI

动态移动dom元素

移动元素包括向左和向右移动选中的，向左和向右移动全部的

我们以下面的html代码为例：

<body>

//要移动的元素

<select multiple="multiple" size="10" id="ldatas">

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>

<option>选项4</option>

<option>选项5</option>

<option>选项6</option>

<option>选项7</option>

<option>选项8</option>

<option>选项9</option>

<option>选项10</option>

</select>

//移动的按钮

<input type="button" id="rmove" value="-->" οnclick="removeRight()"/>
<input type="button" id="rmoveAll" value="==>" οnclick="moveAllRight()"/>
<input type="button" id="lmoveOne" value="<--" οnclick="removeLeft()"/>
<input type="button" id="lmoveAll" value="<==" οnclick="moveAllLeft()"/>

//要移动的目的地

<select multiple="multiple" size="10" id="rdatas">

</select>

</body>

1．首先来看向右移动全部的代码解析：

function moveRightAll(){

//获取右移的节点对象

var lrmoveAllNode = get("rmoveAll");

//添加事件

rmoveAll.onclick = function(){

//select节点的获取

var ldataNode = get("ldatas");

//获取该节点下面的所有的option节点对象

var loptionsNode = ldataNode.getElementsByTagName("option");

//获取要添加到的节点对象

var rdatasNode = get("rdatas");

//如果把loptionsNode.length放到for中是变值

var lengths = loptionsNode.length;//定值

for(var i = 0;i<lengths;i++){

//把ldatasNode 个数10 始终移第一个

rdatasNode.appendChild(loptionsNode[0]);

}

}

}.

2. 向左移动全部的元素节点：

//向左移动全部节点

function moveAllLeft(){

var lmoveAllNode = get("lmoveAll");

lmoveAllNode.onclick = function(){

//获取左移节点的对象

var rdataNode = get("rdatas");

//获取左移的所有的option节点

var roptionsNode = rdataNode.getElementsByTagName("option");

//获取左边的节点对象

var ldatasNode = get("ldatas");

var lengths = roptionsNode.length;//定值

for (var i = 0; i < lengths; i++) {

//把ldatasNode 个数10 始终移第一个

ldatasNode.appendChild(roptionsNode[0]);

}

}

}

3.单向向右移动

//向右移动全部节点

function moveAllRight(){

//获取右移的节点对象

var lrmoveAllNode = get("rmoveAll");

//添加事件

rmoveAll.onclick = function(){

//select节点的获取

var ldataNode = get("ldatas");

//获取该节点下面的所有的option节点对象

var loptionsNode = ldataNode.getElementsByTagName("option");

//获取要添加到的节点对象

var rdatasNode = get("rdatas");

//如果

//如果把loptionsNode.length放到for中是变值

var lengths = loptionsNode.length;//定值

for (var i = 0; i < lengths; i++) {

//把ldatasNode 个数10 始终移第一个

rdatasNode.appendChild(loptionsNode[0]);

}

}

}

4．单向向左移动

function removeLeft(){

//往左移

var rmoveNode = get("lmoveOne");

rmoveNode.onclick = function(){

//获取右边节点中的所有的option

var rdatasNode = get("rdatas");

//获取option对象

var loptionsNode = rdatasNode.getElementsByTagName("option");

//获取左边节点

var ldatasNode = get("ldatas");

for (var i = 0; i < loptionsNode.length; i++) {

if (loptionsNode[i].selected) {

ldatasNode.appendChild(loptionsNode[i]);

i--;

}

}

}

}

iteye_15883
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM元素的移动
2301_76222589的博客
01-17 384
DOM元素的移动
如何拖动DOM元素
Never say never for ss
02-24 278
css部分 .divblok { background-color:rgba(172,16,172,0.5); width:200px; height:100px; position:absolute; left:20px;
JavaScript DOM编程艺术—javascript实现移动元素动画
柚的个人技术博客
11-19 1238
test.html Wheel! addLoadEvent.js function addLoadEvent(func){ var oldonload = window.onload; if(typeof oldonload != 'function'){ window.onload= func; } else{ oldonload(); func();
JSDom——列表选中移动篇
diqiongjia6422的博客
09-27 516
这个列表选中移动呢，灵感来自淘宝，在淘宝注册店铺的过程中，会涉及到选择分类，而其选择方式呢，就是如下效果： 以下为具体的实现方式： ①HTML源码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
动态改变dom结构常用方法
weixin_30788619的博客
05-05 231
动态改变dom结构常用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>动态改变dom结构</title> </head> <script type="applicatio...
jQuery移动和复制dom节点实用DOM操作案例
10-27
复制节点也是常用的DOM操作之一，例如很多购物网站的效果,本文将介绍jQuery移动和复制dom节点等实用DOM操作，有需的朋友可以参考下
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
01-19
这种移动被称为对 DOM 进行遍历。 遍历 – 父级（祖先） 向上遍历DOM数。 通过如下三个方法，我们可以获取父级元素： parent() parents() parentsUntil() 1.JQuery parent() parent() 方法返回被选元素的直接父...
jQuery中DOM树操作之复制元素的方法
01-21
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下： 复制元素 前面提到的操作包括：插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置，以及通过新元素来包装已有...
dom-move:将子节点从一个 DOM 节点移动到另一个节点
07-09
dom-move 将子元素从 DOM 节点移动到另一个 dom 节点。用法 move ( source , destination ) ; source所有子节点都将被删除，并附加到destination 。 返回destination节点，因此您可以执行以下操作： var content = ...
DOM元素的绝对位置
04-08
DOM元素的绝对位置对于实现动态效果、交互和布局计算至关重要。本文将详细讲解如何使用JavaScript获取DOM元素的绝对位置，并探讨相关知识点。 首先，理解CSS定位是关键。在CSS中，元素的位置可以通过设置`position`...
原生js操作dom实现上下左右移动.docx
11-23
例如，我们可以使用translateX和translateY方法来移动元素： ``` box.style.transform = "translateX(100px) translateY(100px)"; ``` 在本文中，我们还使用了absolute定位来实现元素的移动。例如，我们可以使用...
displace:最小JavaScript库，用于创建可移动的DOM元素
05-17
一个最小的javascript库，用于启用可移动的DOM元素。 压缩后〜1.2kb 支持移动触摸 没有依赖关系/膨胀 IE9 + 入门 参考 通过npm安装： npm install --save displacejs 引用displace.min.js并通过displace使用： ...
动态网络元素
02-16
随着移动设备的普及，动态网络元素必须适应各种屏幕尺寸。响应式设计利用CSS的媒体查询（Media Queries）来根据设备特性调整布局和元素样式。这确保了无论在桌面还是手机上，动态元素都能正常工作并提供良好的用户...
JavaScript, select标签元素左右移动功能实现
10-15
在这些函数中，`appendChild()` 方法用于在DOM树中移动元素。当一个option元素从一个select元素移动到另一个时，它的实际位置在文档中发生了改变。此外，`selected` 属性用于追踪option元素的选中状态。 在实际应用...
JS判断指定dom元素是否在屏幕内的方法实例
11-28
标题中的“JS判断指定DOM元素是否在屏幕内的方法实例”是指一种JavaScript技术，用于检测DOM元素是否在用户当前查看的浏览器窗口（也称视口）内。这种技术常用于实现滚动交互效果，例如，当元素进入视口时触发动画或...
DOM操作怎样添加、移除、移动、复制、创建和查找节点
最新发布
weixin_42095178的博客
01-11 773
/ 选择要复制的节点let newNode = nodeToCopy.cloneNode(true);// 复制该节点，并包括其子节点和属性document.body.appendChild(newNode);// 选择要移动的节点let newParent = document.querySelector("#new-parent");// 获取该节点的父节点。// 将节点移动到新的父节点的子节点列表的末尾。使用appendChild()方法可以将一个节点添加到现有节点的子节点列表的末尾。
JS——DOM节点操作
chihuomiao的博客
05-13 1235
主要包括 创建添加插入替换删除克隆 创建：document.createElement（'标签名'） 创造一个指定标签元素，返回的是一个创建好的元素节点、 如果浏览器无法识别标签名就会生成一个未知HTML元素 一般流程---- 1创建空对象（只能用document调用） 2为空元素添加关键属性和内容 3将空元素加载到dom树中 添加：父节点.appendChild（子节点） 把这个子节点追加到父节点下所有子元素的末尾，如果加入的子节点已经存在DOM树中，那么就会改变该子节点的位置 .
Vue3 中的虚拟DOM、 h() 函数，渲染函数，渲染器知识点一网打尽！
梦是太匆
09-27 2397
Vue.js包含了编译器和渲染器。编译器会将 vue 文件中的template模板内容编译成渲染函数，并挂载到script导出的对象中，编译器编译后的渲染函数返回的 DOM 会包含patchFlag属性，该属性标识了哪些内容是会动态变更的。渲染器会遍历渲染函数返回的 DOM，并生成对应的真实 DOM，在页面内容发生变化时，渲染器会根据patchFlag属性，动态更新对应内容，从而提升性能。用户可以通过h()函数动态创建虚拟 DOM并返回。PS. 我们日常使用的得到的render方法，其实是渲染器方法。
JS调整dom元素位置（appendChlild）将一个dom元素加在其他dom元素下
JulyNight的博客
03-17 1705
用getElementById获取dom 将id为11对应的dom加到id为22的dom元素下 var node=document.getElementById("11"); document.getElementById("22").appendChild(node); 用getElementsByClassName获取dom 将class为11对应的dom加到class为22的dom元素下 var node = document.getElementsByClassName('11')[0] docu
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、付费专栏及课程。

余额充值