版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/84934902
label 元素不会向用户呈现任何特殊效果
label把事件转移到相关元素上面
for 属性规定 label 与那个元素绑定绑定事件
1结合上传文件的元素使用
<div class="buju1">
<!--label把事件转移到相关蒜素上面-->
<label class="buju2" for="iii"><img id="img1" class="imgtubiao" src="img/addimg.jpg"> </label>
<input class="myinput" type="file" name="pic" onchange="fileUpload(this)" id="iii">
</div>
2结合单选框 for属性个和相对应的id绑定
<div class="buju3">
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</div>
3结合多选框
<div class="buju4">
<label for="pg">苹果</label>
<input type="checkbox" name="shuiguo" id="pg" />
<br />
<label for="xj">香蕉</label>
<input type="checkbox" name="shuiguo" id="xj" />
</div>
效果图:
完整代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- 本周练习label,周末写博客-->
<!-- 适配手机-->
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.buju2{
display: block;
position: relative;
top: 0px;
left: 0px;
}
.myinput{
width: 60px;
height: 60px;
position: absolute;
opacity: 0;
background-color: cornflowerblue;
}
.imgtubiao{
width: 60px;
height: 60px;
position: absolute;
}
.buju3{
height: 100px;
width: 100px;
background-color: cornflowerblue;
position: relative;
top: 60px;
left: 0px;
}
.buju4{
height: 100px;
width: 100px;
background-color: yellow;
position: relative;
top: 60px;
left: 0px;
}
</style>
</head>
<body>
<!-- label 元素不会向用户呈现任何特殊效果-->
<!-- label把事件转移到相关元素上面-->
<!-- for 属性规定 label 与那个元素绑定绑定事件-->
<!-- 结合上传文件的元素使用-->
<div class="buju1">
<!--label把事件转移到相关蒜素上面-->
<label class="buju2" for="iii"><img id="img1" class="imgtubiao" src="img/addimg.jpg"> </label>
<input class="myinput" type="file" name="pic" onchange="fileUpload(this)" id="iii">
</div>
<!-- 结合单选框 for属性个和相对应的id绑定-->
<div class="buju3">
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</div>
<!-- 结合多选框-->
<div class="buju4">
<label for="pg">苹果</label>
<input type="checkbox" name="shuiguo" id="pg" />
<br />
<label for="xj">香蕉</label>
<input type="checkbox" name="shuiguo" id="xj" />
</div>
<script>
// 拿到选择的图片,显示出来
function fileUpload(f) {
var rd = new FileReader();//创建文件读取对象
var files = f.files[0];//获取file组件中的文件
rd.readAsDataURL(files);//文件读取装换为base64类型
rd.onloadend = function (e) {
//加载完毕之后获取结果赋值给img
document.getElementById("img1").src = rd.result;
console.log(this.result);
}
}
</script>
</body>
</html>
源码下载:
lianxi2----…----Label.html
https://download.csdn.net/download/zhaihaohao1/10839403