JS属性操作2--innerHTML和className

1.innerHTML的使用：
css部分：

<input type="button" name="" id="btn1" value="点一下"><br>
<div id="box"></div>

JS部分：

<script type="text/javascript">
	var odiv=document.getElementById('box');
	var obtn1=document.getElementById('btn1');
	var a=1;
	//alert(odiv.innerHTML);
	obtn1.onclick=function(){
		//odiv.innerHTML=odiv.innerHTML+'ajioio ';
		//odiv.innerHTML+='ajioio ';               添加内容
		//odiv.innerHTML+='<span>sadkh</span>';    添加标签
         //if(a>2){
         	//a=1;}
         //odiv.innerHTML+='<img src="img/'+a+'.jpg" alt=""/>';
         //a+=1;
	}
</script>

注：
innerHTML：元素里面的所有东西 文字 换行 标签
可以进行读操作 写操作
例如：(1)odiv.innerHTML 读取元素里面的内容
(2)odiv.innerHTML=‘新值’ 替换原来的值

2.className的使用：
主要以实例来体现：
实例css部分：

	<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.3s;
		}
		.a{
			border:4px solid blue;
			background:green;
			color:#ccc;
			border-radius: 50%;
		}
		.b{
			border:4px solid blue;
			background:black;
			color:#172678;
			border-radius: 50%;
		}
		.c{
			border:4px solid blue;
			background:brown;
			color:#172679;
			border-radius: 50%;
		}
	</style>

JS部分：

<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='b';
	}
		odiv3.onclick=function(){
		odiv3.className='c';
	}
</script>
//要在JS中给标签添加class的话，需要使用className