节点操作案例

最新推荐文章于 2022-04-24 12:55:36 发布
最新推荐文章于 2022-04-24 12:55:36 发布
阅读量176 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42303695/article/details/107213522
版权

改变字体颜色和大小

html+css

	<body>
		<div id="div1">
			节点操作案例
		</div>
	</body>

#div1{width: 400px;height: 200px;border: 1px black solid;margin: 40px auto;text-align: center;font-size: 18px;line-height: 200px;}

随机颜色的函数

function randomColor(){
				var str="rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";
				return str;
}

实现字体颜色大小周期改变的动画效果

var r=1;
var i=0;
window.onload=function(){
	var oDiv=document.getElementById("div1");
	setInterval(function(){
		oDiv.style.color=randomColor();
		var fs=getComputedStyle(oDiv)["fontSize"];
		oDiv.style.fontSize=parseInt(fs)+r+"px";
		i++;
		if(i%6==0){
			r=-r;
		}
	},1000);
}

节点操作

html和css代码

	<body>
		<div id="div1">
			<input type="text" name="" id="input1" placeholder="输入内容" />
			<button type="button">增加</button>
			<button type="button">删除</button>
			<button type="button">拷贝</button>
		</div>
		<div id="div2">
			
		</div>
	</body>

<style type="text/css">
	#div1{width: 400px;height: 100px;background-color: #FFA500;margin: auto;text-align: center;line-height: 50px;}
	#div2{width: 400px;height: 500px;background-color: peachpuff;margin: auto;}
	#input1{width: 380px;height: 30px;font-size: 18px;}
	#div2 div{border-bottom: 1px dashed gray;padding: 2px;position: relative;}
	#div2 button{position: absolute;right:0px;}
</style>

JS代码

window.onload=function(){
	var oDiv1=document.getElementById("div1");
	var oDiv2=document.getElementById("div2");
	var oInput=document.getElementById("input1")
				
	var aBtns=oDiv1.getElementsByTagName("button");
	aBtns[0].onclick=function(){
		if(!oInput.value){
			alert("输入内容不能为空")
		}
		else{
			var newDiv=document.createElement("div");
			var oTxt=document.createTextNode(oInput.value);
			newDiv.appendChild(oTxt);
			oDiv2.appendChild(newDiv);
		}
	}
	aBtns[1].onclick=function(){
		oDiv2.removeChild(oDiv2.lastChild);
	}
	aBtns[2].onclick=function(){
		var newNode=oDiv2.lastChild.cloneNode(true);
		oDiv2.appendChild(newNode);
	}
}
fgf-2021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
06 JS-DOM之--节点操作（4种）附案例源码
路遇惊喜
11-29 733
节点的操作一共四种： 创建节点（3种） 添加节点（2种） 删除节点（1种） 复制节点
JavaScript的节点操作 —— 增加节点
Ass12454548的博客
01-23 1403
JavaScript的节点操作 —— 增加节点
一个简单的节点操作案例
weixin_45787050的博客
11-26 200
一个简单的节点操作案例 css和html <style> table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-siz...
javascript学习笔记(十九) 节点的操作实现代码
12-07
本节要用到的html例子 代码如下: <ul id=”myList”> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> 1.创建元素节点 document.createElement() 方法 用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点 代码如下: var div = document.createElement(“div”); //创建一个div元素 div.id = “myDiv”; //设置div的id div.className = “box”; //设置div的class 创建元素后还要把元素添加到文档树中
DOM（3）节点案例
youguang_的博客
11-30 243
(case 1) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt
JQuery常见节点操作实例分析
10-17
主要介绍了JQuery常见节点操作,结合实例形式分析了jQuery针对元素节点的添加、删除常见操作函数使用技巧与相关注意事项,需要的朋友可以参考下
节点操作作业案例.zip
04-25
jQuery的节点操作的三个小案例
JavaScript节点及列表操作实例小结
12-11
本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下： （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建...
jQuery移动和复制dom节点实用DOM操作案例
10-27
复制节点也是常用的DOM操作之一，例如很多购物网站的效果,本文将介绍jQuery移动和复制dom节点等实用DOM操作，有需的朋友可以参考下
Javascript的各种节点操作实例演示代码
10-28
实例演示对javascript的节点的各种操作。包括hasChildNodes()，removeChild()，appendChild()，replaceChild()，insertBefore()，cloneNode()等
节点操作~JS
qq_64970126的博客
04-24 1573
节点操作： 1、element.innerHTML将内容写入某个dom节点，不会导致页面重绘 2、element.appendChild(),将节点添加到指定父节点的子节点的末尾 3、element.insertBefore(节点，指定预插入的位置) 4、element.removeChild（删的节点）用于删除节点 节点案例： 留言框、动态学生成绩表
选择器+节点属性操作代码
jiaowoqiaodaima的博客
04-12 220
onscroll： 滚动事件，当网页撑出滚动条的时候，滑动滚动条触发事件 onresize： 窗口事件，当浏览器窗口大小改变时触发属性 innerwidth： 获取浏览器可见宽度 innerheight： 获取浏览器可见高度 短路运算符： var scrollTop=document.documentElement.scrollTop fn && fn（） 节点： Dom中把网页结构进行形象化，是一种树型结构 属性： nodeName 节点名称 nodeType 节点类型 nodeValue
Zookeeper中节点操作代码
weixin_46068252的博客
01-15 780
完整代码 package yan.dong.text; import org.apache.zookeeper.*; import org.apache.zookeeper.data.Stat; import org.junit.Before; import org.junit.Test; import java.io.IOException; import java.util.List; public class TestZK { // Zookeeper集群IP private
JS操作节点经典案例（三级联动）
个人网站：https://www.longzipeng.online
08-21 602
引入 通过JS操作DOM元素对象，实现三级联动，效果如图所示。 js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三级联动</title> </head> <body> <select name="province" id="province" onchange="changeP(this)">
JavaScript 节点操作案例
qq_52476758的博客
12-13 437
JavaScript 节点操作案例 1. 新浪下拉菜单 <style> /* 新浪下拉菜单 */ * { margin:0; padding: 0; } a { text-decoration: none; font-size: 14px; } li { list-style: none; } .nav { margin:100px; } .nav>li { position
DOM之对节点的操作
weixin_42526648的博客
04-29 212
1.创建节点 1.createElement()创建一个元素节点 let p = document.createElement('p') 2.插入节点 1.appendChild()添加一个子节点 语法：父元素.appecdChild(你要添加的子节点) 这个方法必须要传递一个节点作为参数不能字符串 是放在父元素的末尾 box.ap...
DOM节点操作 -- 表单（form标签）完成增删操作示例
樂小伍
09-02 432
表单增加或删除一条数据 【示例】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DOM综合,增删</title> <script> window.onload=function(){ var btn = do...
Javascript——节点操作元素案例及封装节点
mintsolace的博客
07-06 197
例：点击按钮设置div中p标签改变背景颜色 <input type="button" value="变色" id="btn" /> <div id="dv"> <span>1</span> <p>2</p> <span>3</span> <p>4</p&...
c#treeview选择多个节点拖拽移动代码案例
最新发布
06-12
下面是一个C# TreeView控件选择多个节点拖拽移动的示例代码： ```csharp ...在DragDrop事件中，获取拖拽操作的源节点和目标节点，并循环将所有源节点移动到目标节点下面。最后，选中移动后的节点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值