innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
display: block;
height: 60px;
background: #21EE34;
font:35px/60px "simhei";
color: #fff;
}
img{
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<input type = "button" value = "click here" id = "btn1">
<div id = "box">
<span>德玛西亚大保健</span>
</div>
</body>
</html>
<script type="text/javascript">
/*
innerHTML就是元素里面所有的东西 文字 换行 标签 空格...
innerHTML可以进行读操作也能进行写操作
oDiv.innerHTML
读取oDiv里面的内容
oDiv.innerHTML = 新的值;
替换原来的div内容
*/
var oDiv = document.getElementById("box");
var oBtn1 = document.getElementById("btn1");
var a = 1;
oBtn1.onclick = function(){
if(a > 3)
a = 1;
//alert(oDiv.innerHTML);
//oDiv.innerHTML = oDiv.innerHTML + "<span>德玛西亚大保健</span>"
oDiv.innerHTML += '<img src="img/'+ (a++) +'.jpg" alt = ""/>';
}
</script>
效果展示
1
alert(oDiv.innerHTML);
会保留div里面的空格 回车 标签等所有内容
2
oDiv.innerHTML = oDiv.innerHTML + "<span>德玛西亚大保健</span>"
3
if(a > 3)
a = 1;
oDiv.innerHTML += '<img src="img/'+ (a++) +'.jpg" alt = ""/>';
4.
如果把button放在div里面的话,第二次点击就失效了,因为div被全部替换了,所以它的click方法不会被执行
className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height: 100px;
background: red;
border: 2px solid yellow;
float: left;
margin-left: 100px;
text-align: center;
font:30px/100px "simhei";
color: #fff;
transition: 0.4s;
}
.a{
border: 6px solid #26FF08;
background: #2E00EF;
color: #ccc;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
<script type="text/javascript">
var oDiv1 = document.getElementById("box1");
var oDiv2 = document.getElementById("box2");
var oDiv3 = document.getElementById("box3");
oDiv1.onclick = function(){
oDiv1.className = "a";
}
oDiv2.onclick = function(){
oDiv2.className = "a";
}
oDiv3.onclick = function(){
oDiv3.className = "a";
}
</script>
1.
实际上是通过className为div设置了一个class
下图为点击以后的效果
2.