设置属性的案例练习

1. 设置盒子的大小和透明度
   css部分

body{
	background-color: #000;
}
.box {
	height: 100px;
	width: 100px;
	background-color: pink;
}

body部分

<div class="box"></div>
<script>
var box = document.getElementsByClassName("box")[0];
box.style.width = "150px";
box.style.height = "300px";
box.style.filter = "alpha(opacity = 10)";//10为百分制，即10%
</script>

2. 文本框获取焦点后高亮显示
代码如下

<input type="text">
<input type="text">
<input type="text">
<input type="text"><button>设置</button>
<script>
var inpArr = document.getElementsByTagName("input");
var btn = inpArr[inpArr.length-1].nextSibling || inpArr[inpArr.length-1].nextElementSibling;

console.log(btn);
btn.onclick = function(){
	for(var i=0; i<inpArr.length;i++){
			inpArr[i].onfocus = function(){
				this.style.border = "3px solid red";
				this.style.backgroundColor = "#ccc";
			}
			inpArr[i].onblur = function(){
				this.style.border = "";
				this.style.backgroundColor = "";
			}
	}
}
</script>