JavaScript点击div左上角出现对勾选中
分类：实例代码
分享一段代码实例，它实现了选中div元素会在元素一角打勾的效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#box{
margin:20px auto;
height:100px;
width:150px;
position:relative;
cursor:pointer;
overflow:hidden;
background-color:#ccc;
}
#box.border {
border:1px dotted red;
}
#box .gou{
position:absolute;
width: 24px;
height: 24px;
right:0px
}
#box .gou.on::after {
border-color: red;
}
#box .gou::after{
position: absolute;
top: 4px;
left: 8px;
width: 6px;
height: 10px;
border-style: solid;
border-color: #ccc;
border-width: 0 2px 2px 0;
transform: rotateZ(45deg);
content: "";
}
</style>
<script>
window.onload = function () {
var obox = document.getElementById("box");
var ospan = obox.getElementsByTagName("span")[0];
var flag = 0;
obox.onclick = function () {
if (!flag) {
ospan.className = "gou on";
obox.className = "border";
flag = 1;
} else {
ospan.className = "gou";
obox.className = "";
flag = 0;
}
}
}
</script>
</head>
<body>
<div id="box">
<span class="gou"></span>
</div>
</body>
</html>
上面的代码实现了我们的要求，内容可以参阅相关阅读。
相关阅读:
（1）.document.getElementById参阅document.getElementById()一章节。
（2）.getElementsByTagName参阅document.getElementsByTagName()一章节。
（3）.className参阅JavaScript className一章节。
JavaScript点击div左上角出现对勾选中，这样的场景在实际项目中还是用的比较多的，关于JavaScript点击div左上角出现对勾选中就介绍到这了。
JavaScript点击div左上角出现对勾选中属于前端实例代码，有关更多实例代码大家可以查看。