js技巧-进入页面执行方法，根据id修改css样式

刚进入页面执行的方法

<script type="text/javascript">
    window.onload = function(){//进入页面执行方法
        alert("111");//执行弹窗提示
        fun();//执行方法fun
    }
</script>

js更改css样式

<script type="text/javascript">
    function fun1() {//执行方法fun1
        var info = document.getElementById("info");//锁定需要修改地方的id值给其定义
        //以以下样式作为例子，根据id修改样式
        info.style.backgroundColor= "red";//修改背景色为红色
        info.style.color= "red";//修改前景色为红色
        info.style.display="none"; //隐藏id为info的组件
        info.style.border= "3px solid red";//修改边框样式    
    }
</script>

案例：判断input中的值是否一致，若不一致，将前者边框样式进行修改

一、固定值

样式

代码

<!--在body中写出组件信息-->
<input type="text" value="111" id="input1"/>
<input type="text" value="222" id="input2"/>
<!--js执行方法-->
<script type="text/javascript">
	//刚进入页面执行
	window.onload = function() {
		var input1=document.getElementById('input1').value;//寻找对应id
		var input2=document.getElementById('input2').value;
		if(input1!=input2){
			var info = document.getElementById("input1");//锁定需要修改地方的id值给其定义
			info.style.border= "3px solid red";//修改边框样式
		}	
    }              

二、修改input中的值，若不一样样式进行修改

样式

代码

//input组件设置，失去焦点执行方法
<input type="text" id="input1" onblur="fun1()" style="border:1px solid #808080"/>
<input type="text" id="input2" onblur="fun1()" style="border:1px solid #808080"/>
//js实现功能
<script type="text/javascript">
	function fun1(){
	    //锁定id值
		var input1=document.getElementById('input1').value;
		var input2=document.getElementById('input2').value;
		if(input1!=input2){//两个值不一致，修改第一个文本框样式
			var info = document.getElementById("input1");//锁定需要修改地方的id值给其定义
			info.style.border= "3px solid red";//修改边框样式
		}
		if(input1==input2){//两个值一致时，将第一个文本框样式恢复为初始状态
			var info = document.getElementById("input1");//锁定需要修改地方的id值给其定义
			info.style.border= "1px solid #808080";//修改边框样式
		}
	}