禁用文本框,按鈕變色,移動變色

點擊按鈕禁用文本框

	<input type="button" value="禁用文本框" id="btn">
	<input type="test" name="文本框" id="txt">
	<script type="text/javascript">
		//先根據id獲取按鈕,爲按鈕註冊點擊事件,添加事件處理函數
		document.getElementById('btn').onclick = function(){
			//根據id獲取文本框,設置disable屬性
			document.getElementById("txt").disabled= true;
		};
	</script>

點擊按鈕變換顏色

<input type="button" value="變色" id="btn">
	<ul id="uu">
		<li>張三</li>
		<li>李四</li>
		<li>張三</li>
		<li>李四</li>
		<li>張三</li>
		<li>李四</li> 
	</ul>
	<script type="text/javascript">
		//先根據id獲取按鈕,爲按鈕註冊點擊事件,添加事件處理函數
		document.getElementById('btn').onclick = function(){
			//根據id獲取文本框,設置disable屬性
			document.getElementById("uu").style.backgroundColor = "yellow";
		};
	</script>

當鼠標移動到某個標籤時,進行顏色的改變:

<style type="text/css">
	li{
		list-style-type: none;
		cursor: pointer;
	}
</style>
<ul>
	<li>張三</li>
	<li>李四</li>
	<li>王五</li>
	<li>趙六</li>
	<li>張三</li>
	<li>李四</li>
	<li>王五</li>
	<li>趙六</li>
</ul>
```javascript
<script type="text/javascript">
	var list = document.getElementsByTagName('li');
	for (var i = 0; i < list.length; i++) {
		//爲li註冊鼠標進入事件
		list[i].onmouseover = function(){
			this.style.backgroundColor = "yellow";
		};
		//爲li註冊鼠標離開事件
		list[i].onmouseout = function(){
			//恢復到標籤默認的顏色
			this.style.backgroundColor = "";
		};
	}
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章