JS-DOM ～ 03. 子节点的操作style.样式和属性dom元素的创建方法及操作14个例题主要是利用js直接控制html属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-DOM ～ 03. 子节点的操作style.样式和属性dom元素的创建方法及操作14个例题主要是利用js直接控制html属性相关的知识，希望对你有一定的参考价值。
- 带有Element和不带的区别
a) 带Element的获取的是元素节点
b) 不带可能获取文本节点和属性节点
- 获取所以子节点
a) . childNodes
b) . children
c) . parentNode . children [索引]
- . children：获取所有子节点
- opacity：0-1；透明度
- alpha（opacity：百分数）；IE6/7/8透明度
- 先绑定事件再进行循环
- previousNode（）上一个兄弟节点
- alert（变量名）可测试变量名是否可以使用
- 获取body，var body = document.body；
设置样式的两种方式
style
- 行内式可以获取打印出来
- 内嵌和外链的获取不了
- 样式少的时候使用
- 驼峰命名规则
- style属性是对象属性
- 值是字符串类型，没设置的时候是“空字符串”
- .style. cssText = “字符串形式的样式”
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #list li { 8 list-style-type: none; 9 width: 80px; 10 height: 30px; 11 line-height: 30px; 12 background-color:beige; 13 text-align: center; 14 float: left; 15 margin-left: 5px; 16 } 17 18 #list li.current { 19 background-color: burlywood; 20 } 21 22 #list li a {#list li { 23 list-style-type: none; 24 width: 80px; 25 height: 30px; 26 line-height: 30px; 27 background-color:beige; 28 text-align: center; 29 float: left; 30 margin-left: 5px; 31 } 32 33 #list li.current { 34 background-color: burlywood; 35 } 36 37 #list li a { 38 text-decoration: none; 39 }#list li { 40 list-style-type: none; 41 width: 80px; 42 height: 30px; 43 line-height: 30px; 44 background-color:beige; 45 text-align: center; 46 float: left; 47 margin-left: 5px; 48 } 49 50 #list li.current { 51 background-color: burlywood; 52 } 53 54 #list li a { 55 text-decoration: none; 56 }#list li { 57 list-style-type: none; 58 width: 80px; 59 height: 30px; 60 line-height: 30px; 61 background-color:beige; 62 text-align: center; 63 float: left; 64 margin-left: 5px; 65 } 66 67 #list li.current { 68 background-color: burlywood; 69 } 70 71 #list li a { 72 text-decoration: none; 73 }#list li { 74 list-style-type: none; 75 width: 80px; 76 height: 30px; 77 line-height: 30px; 78 background-color:beige; 79 text-align: center; 80 float: left; 81 margin-left: 5px; 82 } 83 84 #list li.current { 85 background-color: burlywood; 86 } 87 88 #list li a { 89 text-decoration: none; 90 } 91 text-decoration: none; 92 } 93 </style> 94 <script src="tools.js"></script> 95 <script> 96 window.onload = function () { 97 //需求：点击a链接，让a链接对应的li标签添加类。 98 //思路：点击a链接，让他的父亲添加类，其他的li标签类名清空。 99 //步骤： 100 //1.获取事件源 101 //2.绑定事件 102 //3.书写事件驱动程序 103 104 105 //1.获取事件源 106 var ul = getEle("list"); 107 var aArr = ul.getElementsByTagName("a"); 108 109 for(var i=0;i<aArr.length;i++){ 110 aArr[i].onclick = function () { 111 //点击哪个a链接，让他的父亲添加类 112 this.parentNode.className = "current"; 113 //设置他的父元素的其他所有兄弟节点类名为空 114 var otherArr = getAllSiblings(this.parentNode); 115 for(var j=0;j<otherArr.length;j++){ 116 otherArr[j].className = ""; 117 } 118 } 119 } 120 121 // //1.获取事件源 122 // var ul = getEle("list"); 123 // var liArr = ul.children; 124 // //2.绑定事件 125 // for(var i=0;i<liArr.length;i++){ 126 // var a = getFirstNode(liArr[i]); 127 // a.onclick = function () { 128 // //3.书写事件驱动程序 129 // //排他思想 130 // for(var j=0;j<liArr.length;j++){ 131 // liArr[j].className = ""; 132 // } 133 // this.parentNode.className = "current"; 134 // } 135 // } 136 } 137 </script> 138 </head> 139 <body> 140 141 <div id="menu"> 142 <ul id="list"> 143 <li class="current"><a href="#">首页</a></li> 144 <li><a href="javascript:void(0)">播客</a></li> 145 <li><a href="javascript:void(0)">博客</a></li> 146 <li><a href="javascript:void(0)">相册</a></li> 147 <li><a href="javascript:void(0)">关于</a></li> 148 <li><a href="javascript:void(0)">帮助</a></li> 149 </ul> 150 </div> 151 152 </body> 153 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #list li { 8 list-style-type: none; 9 width: 80px; 10 height: 30px; 11 line-height: 30px; 12 background-color:beige; 13 text-align: center; 14 float: left; 15 margin-left: 5px; 16 } 17 18 #list li.current { 19 background-color: burlywood; 20 } 21 22 #list li a {#list li { 23 list-style-type: none; 24 width: 80px; 25 height: 30px; 26 line-height: 30px; 27 background-color:beige; 28 text-align: center; 29 float: left; 30 margin-left: 5px; 31 } 32 33 #list li.current { 34 background-color: burlywood; 35 } 36 37 #list li a { 38 text-decoration: none; 39 }#list li { 40 list-style-type: none; 41 width: 80px; 42 height: 30px; 43 line-height: 30px; 44 background-color:beige; 45 text-align: center; 46 float: left; 47 margin-left: 5px; 48 } 49 50 #list li.current { 51 background-color: burlywood; 52 } 53 54 #list li a { 55 text-decoration: none; 56 }#list li { 57 list-style-type: none; 58 width: 80px; 59 height: 30px; 60 line-height: 30px; 61 background-color:beige; 62 text-align: center; 63 float: left; 64 margin-left: 5px; 65 } 66 67 #list li.current { 68 background-color: burlywood; 69 } 70 71 #list li a { 72 text-decoration: none; 73 }#list li { 74 list-style-type: none; 75 width: 80px; 76 height: 30px; 77 line-height: 30px; 78 background-color:beige; 79 text-align: center; 80 float: left; 81 margin-left: 5px; 82 } 83 84 #list li.current { 85 background-color: burlywood; 86 } 87 88 #list li a { 89 text-decoration: none; 90 } 91 text-decoration: none; 92 } 93 </style> 94 <script src="tools.js"></script> 95 <script> 96 window.onload = function () { 97 //需求：点击a链接，让a链接对应的li标签添加类。 98 //思路：点击a链接，让他的父亲添加类，其他的li标签类名清空。 99 //步骤： 100 //1.获取事件源 101 //2.绑定事件 102 //3.书写事件驱动程序 103 104 105 //1.获取事件源 106 var ul = getEle("list"); 107 var aArr = ul.getElementsByTagName("a"); 108 109 for(var i=0;i<aArr.length;i++){ 110 aArr[i].onclick = function () { 111 //点击哪个a链接，让他的父亲添加类 112 this.parentNode.className = "current"; 113 //设置他的父元素的其他所有兄弟节点类名为空 114 var otherArr = getAllSiblings(this.parentNode); 115 for(var j=0;j<otherArr.length;j++){ 116 otherArr[j].className = ""; 117 } 118 } 119 } 120 121 // //1.获取事件源 122 // var ul = getEle("list"); 123 // var liArr = ul.children; 124 // //2.绑定事件 125 // for(var i=0;i<liArr.length;i++){ 126 // var a = getFirstNode(liArr[i]); 127 // a.onclick = function () { 128 // //3.书写事件驱动程序 129 // //排他思想 130 // for(var j=0;j<liArr.length;j++){ 131 // liArr[j].className = ""; 132 // } 133 // this.parentNode.className = "current"; 134 // } 135 // } 136 } 137 </script> 138 </head> 139 <body> 140 141 <div id="menu"> 142 <ul id="list"> 143 <li class="current"><a href="#">首页</a></li> 144 <li><a href="javascript:void(0)">播客</a></li> 145 <li><a href="javascript:void(0)">博客</a></li> 146 <li><a href="javascript:void(0)">相册</a></li> 147 <li><a href="javascript:void(0)">关于</a></li> 148 <li><a href="javascript:void(0)">帮助</a></li> 149 </ul> 150 </div> 151 152 </body> 153 </html>
1 <body> 2 <div style="width: 100px;height: 100px;background-color: pink;"></div> 3 <script> 4 5 var div = document.getElementsByTagName("div")[0]; 6 div.onmouseover = function () { 7 div.style.width = "200px"; 8 div.style.height = "200px"; 9 div.style.backgroundColor = "black"; 10 div.style.opacity = "0.2"; 11 div.style.filter = "alpha(opacity=20)"; 12 } 13 14 </script> 15 16 </body>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 input { 8 display: block; 9 } 10 </style> 11 </head> 12 <body> 13 <ul> 14 <input type="text"/> 15 <input type="text"/> 16 <input type="text"/> 17 <input type="text"/> 18 <input type="text"/> 19 <button>设置</button> 20 </ul> 21 <script> 22 //需求：点击设置按钮，让所有的input标签获取焦点后高亮显示 23 //步骤： 24 //1.获取事件源 25 //2.绑定事件 26 //3.书写事件驱动程序 27 28 //1.获取事件源 29 var inpArr = document.getElementsByTagName("input"); 30 var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ; 31 //2.绑定事件 32 button.onclick = function () { 33 //3.书写事件驱动程序 34 for(var i=0;i<inpArr.length;i++){ 35 //当button按钮被点击以后，所有的input标签被绑定事件，onfocus事件 36 inpArr[i].onfocus = function () { 37 this.style.border = "2px solid red"; 38 this.style.backgroundColor = "#ccc"; 39 } 40 //绑定onblur事件，取消样式 41 inpArr[i].onblur = function () { 42 this.style.border = ""; 43 this.style.backgroundColor = ""; 44 } 45 } 46 } 47 48 49 50 </script> 51 </body> 52 </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
cursor: pointer;
}
.current {
background-color: red!important;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>
1
</td>
<td>吕不韦</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>吕布</td>
<td>日语</td>
<td>100</td>
</tr>
<tr>
<td>
3
</td>
<td>吕蒙</td>
<td>营销学</td>
<td>100</td>
</tr>
<tr>
<td>
4
</td>
<td>吕尚</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>
5
</td>
<td>吕雉</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>
6
</td>
<td>吕超</td>
<td>体育</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script>
//需求：让tr各行变色，鼠标放入tr中，高亮显示。
//1.隔行变色。
var tbody = document.getElementById("target");
var trArr = tbody.children;
//循环判断并各行赋值属性（背景色）
for(var i=0;i<trArr.length;i++){
if(i%2!==0){
trArr[i].style.backgroundColor = "#a3a3a3";
}else{
trArr[i].style.backgroundColor = "#ccc";?
}
//鼠标进入高亮显示
//难点：鼠标移开的时候要回复原始颜色。
//计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
var color = "";
trArr[i].onmouseover = function () {
//赋值颜色之前，先记录颜色
color = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: url(image/1.jpg) no-repeat;
}
.box {
height: 165px;
padding-top: 35px;
text-align: center;
background: rgba(255,255,255,0.3);
}
img {
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="image/1.jpg" width="200px"/>
<img src="image/2.jpg" width="200px"/>
<img src="image/3.jpg" width="200px"/>
<img src="image/4.jpg" width="200px"/>
<img src="image/5.jpg" width="200px"/>
</div>
<script>
//需求：点击图片，body的背景图修改。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var box = document.getElementsByTagName("div")[0];
//body的获取js内部帮我们优化完毕
var body = document.body;
var imgArr = box.children;
//2.绑定事件
for(var i=0;i<imgArr.length;i++){
imgArr[i].index = i;
imgArr[i].onclick = function () {
//3.书写事件驱动程序
//改body的背景
// body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
body.style.backgroundImage = "url("+this.src+")";
}
}
</script>
</body>
</html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 body { 12 background: url(image/1.jpg) no-repeat; 13 } 14 .box { 15 height: 165px; 16 padding-top: 35px; 17 text-align: center; 18 background: rgba(255,255,255,0.3); 19 } 20 img { 21 cursor: pointer; 22 margin: 0 10px; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="box"> 28 <img src="image/1.jpg" width="200px"/> 29 <img src="image/2.jpg" width="200px"/> 30 <img src="image/3.jpg" width="200px"/> 31 <img src="image/4.jpg" width="200px"/> 32 <img src="image/5.jpg" width="200px"/> 33 </div> 34 35 <script> 36 //需求：点击图片，body的背景图修改。 37 //步骤： 38 //1.获取事件源 39 //2.绑定事件 40 //3.书写事件驱动程序 41 42 //1.获取事件源 43 var box = document.getElementsByTagName("div")[0]; 44 //body的获取js内部帮我们优化完毕 45 var body = document.body; 46 var imgArr = box.children; 47 //2.绑定事件 48 for(var i=0;i<imgArr.length;i++){ 49 imgArr[i].index = i; 50 imgArr[i].onclick = function () { 51 //3.书写事件驱动程序 52 //改body的背景 53 // body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)"; 54 body.style.backgroundImage = "url("+this.src+")"; 55 } 56 } 57 </script> 58 59 </body> 60 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 margin-top: 20px; 9 width: 200px; 10 height: 200px; 11 background-color: red; 12 position: absolute; 13 top: 100px; 14 left: 10px; 15 z-index: 1; 16 } 17 img { 18 position: absolute; 19 top: 100px; 20 left: 10px; 21 } 22 </style> 23 </head> 24 <body> 25 <button>进化吧，皮卡丘！！！</button> 26 <div></div> 27 <img src="image/mm.png" width="200px"/> 28 29 <script> 30 //需求：点击按钮，让盒子和图片同事移开，并且，图片压住盒子. 31 var btn = document.getElementsByTagName("button")[0]; 32 var div = document.getElementsByTagName("div")[0]; 33 var img = document.getElementsByTagName("img")[0]; 34 35 //绑定事件 36 btn.onclick = function () { 37 div.style.top = "300px"; 38 div.style.left = "300px"; 39 40 img.style.top = "300px"; 41 img.style.left = "300px"; 42 img.style.zIndex = "2"; 43 } 44 </script> 45 46 </body> 47 </html>
dom元素的创建方法
1.documrnt.write（“<li></li>”）
A) script写在那就创建在那
B) 会被覆盖
2.parentNode.innerHTML += “<li></li>”
3.已有节点.appendChild（创建的节点）；追加新节点到已有节点的最后面
var ul = document.getElementsByTagName(‘ul‘)[0]; //获取已有元素
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
ul.appendChild(li); //把li标签追加到ul最后面
li.appendChild(liText); //把文本节点追加到li标签中
4.已有节点.insertBefore（创建的节点，已有节点的子节点节点）；在已有节点的子节点之前创建一个新的节点
var ul = document.getElementsByTagName(‘ul‘)[0]; //获取已有元素
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName(‘li‘)[2]; //获取ul的一个子节点
ul.insertBefore(li,list); //添加在list标签之前
5.删除 父节点.removeChild（要删除的子节点）；
A) var ul = document.getElementsByTagName(‘ul‘)[0]; //获取已有元素
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
var list = document.getElementsByTagName(‘li‘)[2]; //获取ul的一个子节点
ul.removeChild(list); //删除ul里的list节点
list.parentNode.removeChild(list); //现照到list的父元素，在进行删除，可以不定义父元素
6.替换 父节点.replaceChild（新节点，老节点）；
A) var ul = document.getElementsByTagName(‘ul‘)[0]; //创建一个文本节点
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName(‘li‘)[2]; //replaceChild 替换节点
ul.replaceChild(liText,list); //liText替换叼list
7.克隆 var 变量 = 被克隆的节点.cloneNode（true）； （如果true改为false，那么将克隆一个空节点）
var newNode = li.cloneNode(true); //克隆一个li节点给变量newNode
ul.appendChild (newNode); //将克隆的节点添加到ul之后
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button>创建</button> 9 <ul> 10 aaaaa 11 </ul> 12 <script> 13 //第一种创建方式：document.write(); 14 document.write("<li>我是document.write创建的</li>"); 15 16 var btn = document.getElementsByTagName("button")[0]; 17 var ul = document.getElementsByTagName("ul")[0]; 18 // btn.onclick = function () { 19 // document.write("<li>我是document.write创建的</li>"); 20 // } 21 22 //第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签） 23 ul.innerHTML += "<li id=‘li1‘>我是innerHTML创建的</li>"; 24 25 26 //第三种：利用dom的api创建元素 27 var newLi = document.createElement("li"); 28 newLi.innerHTML = "我是createElement创建的"; 29 // console.log(newLi); 30 //在父元素的最后面添加元素。 31 // ul.appendChild(newLi); 32 //指定位置添加 33 var li1 = document.getElementById("li1"); 34 ul.insertBefore(newLi,li1); 35 36 37 </script> 38 39 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul> 9 <li id="li1">我是参照标签</li> 10 </ul> 11 12 <script> 13 //document.write();不常用，因为容易覆盖原来的页面。 14 //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点) 15 //document.createElement;也是比较多的，指定数量的时候一般用它。 16 17 var ul = document.getElementsByTagName("ul")[0]; 18 var li1 = document.getElementById("li1"); 19 20 //创建，添加，删除，替换 21 var li2 = document.createElement("li"); 22 li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的"; 23 ul.appendChild(li2); 24 //用insertBefore添加 25 var li3 = document.createElement("li"); 26 li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的" 27 //父节点.insertBefore(新节点，参照节点); 28 ul.insertBefore(li3,li1); 29 30 31 //删除，替换 32 ul.removeChild(li3); 33 //父节点.replaceChild(newNode,oldNode); 34 ul.replaceChild(li3,li2); 35 36 //克隆node.cloneNode(true);深层复制。 37 for(var i=0;i<=3;i++){ 38 var newLi = li3.cloneNode(true); 39 ul.appendChild(newLi); 40 } 41 42 43 </script> 44 </body> 45 </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
cursor: pointer;
}
</style>
</head>
<body>
<button>创建列表</button>
<ul></ul>
<script>
//需求：点击列表，添加四大名人，然后鼠标放到谁上面，谁高亮显示。
//思路：创建一个数组，添加内容。利用for循环穿件li标签在添加内容，高亮显示。
//步骤：（指定多少个元素的创建最好用for循环）
//老三步
var btn = document.getElementsByTagName("button")[0];
//获取相关元素并定义内容
var arr = ["黑崎一护","乌尔奇奥拉","冰轮丸","名侦探柯南"];
var ul = document.getElementsByTagName("ul")[0];
btn.onclick = function () {
// ul.innerHTML = "";
for(var i=0;i<arr.length;i++){
//创建li元素
var newLi = document.createElement("li");
newLi.innerHTML += "<li>"+arr[i]+"</li>";
//添加到ul中
ul.appendChild(newLi);
}
//获取所有的li标签然后，为他绑定事件，排他思想，高亮显示
var liArr = ul.children;
//为所有的li绑定事件
for(var i=0;i<liArr.length;i++){
liArr[i].onmouseover = function () {
//排他思想，高亮显示
for(var j=0;j<liArr.length;j++){
liArr[j].style.backgroundColor = "";
}
this.style.backgroundColor = "red";
}
}
}
</script>
</body>
</html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 margin: 0 auto; 9 padding: 0px; 10 font-size: 12px; 11 background: url(image/bg.gif) repeat center 36px; 12 text-align: center; 13 background-color: #c30230; 14 } 15 #content { 16 margin: 0 auto; 17 width: 960px; 18 background: url(image/content_bg.jpg) no-repeat left top; 19 height: 627px; 20 position: relative; 21 } 22 23 #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 { 24 position: absolute; 25 width: 227px; 26 left: 200px; 27 top: 100px; 28 } 29 30 #content .tip1 .tip_h { 31 background: url(image/tip1_h.gif) no-repeat left top; 32 } 33 34 #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h { 35 width: 227px; 36 padding-top: 45px; 37 height: 23px; 38 text-align: left; 39 cursor: move; 40 } 41 #content .tip1 .tip_c { 42 background: url(image/tip1_c.gif) repeat-y; 43 } 44 45 #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c { 46 width: 200px; 47 padding-left: 12px; 48 padding-right: 15px; 49 min-height: 40px; 50 text-align: left; 51 line-height: 20px; 52 max-height: 160px; 53 word-wrap: break-word; 54 word-break: break-all; 55 overflow: hidden; 56 } 57 58 #content .tip1 .tip_f { 59 background: url(image/tip1_f.gif) no-repeat left top; 60 } 61 62 #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f { 63 width: 227px; 64 height: 53px; 65 padding-top: 20px; 66 } 67 #content .close, #content .close2 { 68 float: left; 69 font-size: 12px; 70 cursor: pointer; 71 color: #000000; 72 } 73 .clr { 74 clear: both; 75 overflow: auto; 76 display: block; 77 height: 0px; 78 } 79 #content .icon { 80 float: left; 81 width: 35px; 82 padding-left: 15px; 83 height: 35px; 84 text-align: center; 85 } 86 #content .name { 87 float: right; 88 padding-right: 15px; 89 text-align: right; 90 font-size: 14px; 91 line-height: 35px; 92 color: #C0F; 93 } 94 #content .num { 95 float: left; 96 padding-left: 7px; 97 width: 195px; 98 } 99 </style> 100 </head> 101 <body> 102 <!--纸条墙--> 103 <div id="content"> 104 <!--纸条--> 105 <div class="tip1" id="tip" > 106 <div class="tip_h" title="双击关闭纸条"> 107 <div class="num">第[49568]条 2016-07-7 22:51:52</div> 108 <div class="close" title="关闭纸条" >×</div> 109 <div class="clr"></div> 110 </div> 111 <div class="tip_c"> 112 普天同庆，天下大同！ 113 </div> 114 <div class="tip_f"> 115 <div class="icon"> 116 <img src="image/bpic_1.gif" title=""> 117 </div> 118 <div class="name">不愿意透露姓名的吕先生</div> 119 <div class="clr"></div> 120 </div> 121 </div> 122 </div> 123 124 <script> 125 //需求：克隆盒子，然后随机位置，点击纸条的时候压住其他的纸条。 126 //思路：获取纸条，克隆，随机数值绑定到纸条上，添加到父盒子中，然后绑定事件层级最高。 127 //步骤： 128 //1.获取纸条，克隆 129 //2.随机数值绑定到纸条上 130 //3.添加到父盒子中 131 //4.然后绑定事件层级最高 132 133 //0.创建多张纸条 134 for(var i=1;i<=10;i++){ 135 //1.获取纸条，克隆 136 var tip = document.getElementById("tip"); 137 var content = document.getElementById("content"); 138 var newTip = tip.cloneNode(true); 139 //问题：id问题。 140 newTip.id = newTip.id+i; 141 //2.随机数值绑定到纸条上(top不要超过400，left不要超过700) 142 var topValue = parseInt(Math.random()*400);//(取值是0-1，那么乘以400,取值就是0-400) 143 var leftValue = parseInt(Math.random()*700);//小数取整 144 newTip.style.top = topValue+"px"; 145 newTip.style.left = leftValue+"px"; 146 //3.添加到父盒子中 147 content.appendChild(newTip); 148 149 //4.然后绑定事件层级最高 150 newTip.onclick = fn; 151 } 152 //tip本身有问题，没有绑定事件。（1.删除。 2.在绑定一次） 153 tip.onclick = fn; 154 // tip.parentNode.removeChild(tip); 155 //获取所有类名叫做的tip1标签，然后绑定事件。 156 var index = 1; 157 function fn() { 158 //计数器 159 this.style.zIndex = index; 160 index++; 161 } 162 163 164 // 点击关闭 隐藏盒子 165 166 var close = document.getElementsByClassName("close"); 167 for (i=0;i<close.length;i++) { 168 close[i].onclick = function () { 169 this.parentNode.parentNode.style.display = "none"; 170 } 171 } 172 173 </script> 174 175 176 177 </body> 178 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 select { 8 width: 180px; 9 height: 240px; 10 font-size: 16px; 11 background-color: #7dff51; 12 } 13 </style> 14 <script> 15 window.onload = function () { 16 //需求：点击>>>左边的所有选项全部进入右边， 17 //点击<<<右边的所有选项全部进入左边。 18 //思路：获取所有的子元素，然后直接添加到另一侧。 19 20 //获取相关元素 21 var sel1 = document.getElementById("sel1"); 22 var sel2 = document.getElementById("sel2"); 23 var btnArr = document.getElementsByTagName("button"); 24 25 //绑定事件 26 btnArr[0].onclick = function () { 27 //获取左侧的select标签的所有子元素 28 var arr = sel1.children; 29 //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么) 30 for(var i=arr.length-1;i>=0;i--){ 31 //push()是操作数组的。要往一个标签中添加元素，要用appendChild(); 32 //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组 33 sel2.appendChild(arr[arr.length-1-i]); 34 } 35 } 36 37 btnArr[1].onclick = function () { 38 //获取左侧的select标签的所有子元素 39 var arr = sel2.children; 40 //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么) 41 for(var i=arr.length-1;i>=0;i--){ 42 //push()是操作数组的。要往一个标签中添加元素，要用appendChild(); 43 //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组 44 sel1.appendChild(arr[arr.length-1-i]); 45 } 46 } 47 48 btnArr[2].onclick = function () { 49 var arr = sel1.children; 50 sel2.appendChild(arr[arr.length-1]); 51 }; 52 btnArr[3].onclick = function () { 53 var arr = sel2.children; 54 sel1.appendChild(arr[arr.length-1]); 55 } 56 57 58 } 59 </script> 60 </head> 61 <body> 62 <!-- multiple --> 63 <select name="" size="10" id="sel1" multiple> 64 <option value="">香蕉</option> 65 <option value="">苹果</option> 66 <option value="">鸭梨</option> 67 <option value="">葡萄</option> 68 </select> 69 <button>>>></button> 70 <button><<<</button> 71 <button>></button> 72 <button><</button> 73 <select name="" size="10" id="sel2" multiple> 74 75 </select> 76 </body> 77 </html>
以上是关于JS-DOM ～ 03. 子节点的操作style.样式和属性dom元素的创建方法及操作14个例题主要是利用js直接控制html属性的主要内容，如果未能解决你的问题，请参考以下文章