<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习5:DOM操作</title>
<style type="text/css">
html,div,ul,li {margin: 0px;padding: 0px;}
a{cursor: pointer;}
li {list-style: none;cursor: pointer;}
fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
#cont_left {width: 300px;height: 500px;float: left;}
#cont_right {float: left;}
.newcss1{background-color: yellowgreen;}
</style>
</head>
<body>
<div id="cont_left">
<ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
<ul id="menu1">
<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
</ul>
</ul>
<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
<ul id="menu2">
<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
</ul>
</ul>
<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
<ul id="menu3">
<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
</ul>
</ul>
</div>
<fieldset>
<legend>原始图片</legend>
<img id="fruit" src="img/fruit.jpg">
</fieldset>
<fieldset>
<legend>图片路径</legend>
<p id="msg1">在这里显示</p>
</fieldset>
<fieldset>
<legend>选择你喜欢的水果</legend>
<ul style="text-align: left;">
<li>
<input name="enjoy" type="checkbox" value="苹果" />苹果
</li>
<li>
<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
</li>
<li>
<input name="enjoy" type="checkbox" value="葡萄" />葡萄
</li>
<li>
<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
</li>
<li>
<input name="enjoy" type="checkbox" value="西瓜" />西瓜
</li>
</ul>
<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
</fieldset>
<fieldset>
<legend>创建图片</legend>
<div id="msg3"></div>
</fieldset>
<fieldset>
<legend>克隆图片</legend>
<div id="msg4"></div>
</fieldset>
<script>
//菜单收缩与扩展
function show(title) {
let currentMenu = document.getElementById(title);
let currentStatus = currentMenu.style.display;
currentMenu.style.display = currentStatus == "" ? "none" : "";
}
//获取原始图片路径
function showImg() {
}
//获取喜欢的水果
function getFruit() {
}
//创建图片
function createImg() {
}
//克隆图片
function cloneImg() {
}
//改变图片
function changeImg() {
}
//删除图片
function removeImg() {
}
//操作样式1 为原始图片加上行间样式,比如加个红色边框
function changeCss1(){
}
//操作样式2 为所有的 fieldset 标签加个内部样式,比如加背景色
function changeCss2(){
}
</script>
</body>
</html>
1.获取图片的原始路径
首选找到原始图片的src 再找到你要输出的地方
//获取原始图片路径
function showImg() {
var text = document.getElementById('msg1').innerHTML; //获取需要输出地方的文本
var src = document.getElementById('fruit').src; //获取原始图片的src
text = src; //将原始图片的src赋予text
}
2.获取喜欢的水果
首先通过 document.getElementByName('enjoy') 获取水果
但是document.getElementByName()这个函数返回的是对象,不能直接document.getElementByName('enjoy').value获取,只能是document.getElementByName('enjoy')[].value来获取,所以我们使用for循环来遍历输出,通过document.getElementByName('enjoy')[].checked来验证我们所勾选的水果,我们可以输出.value和.checked来看一下
//获取喜欢的水果
function getFruit() {
var a = document.getElementsByName('enjoy'); //获取name为enjoy的元素
document.getElementById('msg2').innerHTML = "你最喜欢的水果是:"; //获取需要输出地方的文本内容
//for循环 追加写入水果
for(var i=0;i<=a.length;i++){
if(a[i].checked == true){
document.getElementById('msg2').innerHTML += a[i].value+" " ;
}
}
}
3.创建图片
首先获取需要输出地方的id,再使用document.createElement函数创建图片
function createImg() {
var msg3 = document.getElementById('msg3'); //获取id元素
var im = document.createElement('img'); //创建图片
im.src = "img/grape.jpg"; //选取想要创建的图片
msg3.appendChild(im); //图片挂载到id上
}
4.克隆图片
情况差不多和上一题类似,只不过需要用到cloneNode这个新的函数
function cloneImg() {
var msg4 = document.getElementById('msg4'); //获取id元素
var cloneim = document.getElementById('fruit'); //获取图片id
msg4.appendChild(cloneim.cloneNode()); //图片挂载到id上
}
5.改变图片
只需要获取原始图片的src 改变即可
function changeImg() {
var msg5 = document.getElementById('fruit'); //获取id元素
msg5.src = "img/grape.jpg"; //更改src
}
6.删除图片
获取图片src,删除即可,删除用到父节点
function removeImg() {
var msg6 = document.getElementById('fruit'); //获取id元素
msg6.parentNode.removeChild(msg6); //删除父节点
}
7.操作样式1
function changeCss1(){
var ele = document.getElementById('fruit'); //获取id
ele.style.border = 'solid 4px red'; //改变border样式
}
8.操作样式2
这题和获取水果类,因为我们使用document.getElementByTagname()返回的是一个对象,所以要用到for循环
function changeCss2(){
var ele = document.getElementsByTagName('fieldset');
for(var i=0;i<ele.length;i++){
ele[i].style.backgroundColor = "green"
}