原生js div設置寬度_div設置背景顏色代碼



196 783 262



特效描述:原生js div設置寬度 背景顏色,

代碼結構

1. HTML代碼

<div>
	<p>請為下面的div設置樣式:<button id="oBtn1">點擊設置</button></p>
	<div id="demo"></div>
</div>
<div id="set">
	<ul>
		<li>
			<span>請選擇顏色:</span>
			<button id="red">紅</button>
			<button id="yellow">黃</button>
			<button id="green">綠</button>
		</li>
		<li>
			<span>請選擇寬(px):</span>
			<button id="oBth2">300</button>
			<button id="oBth3">600</button>
			<button id="oBth4">900</button>
		</li>
		<li>
			<span>請選擇高(px):</span>
			<button id="oBth5">300</button>
			<button id="oBth6">600</button>
			<button id="oBth7">900</button>
		</li>
		<button id="oBtn8">重置</button><button id="oBtn9">確認</button>
	</ul>
</div>
<script type="text/javascript">
window.onload = function(){
	var oSet = document.getElementById('set');
	var red = document.getElementById('red');
	var yellow = document.getElementById('yellow');
	var green = document.getElementById('green');
	var oBtn1 = document.getElementById('oBtn1');
	var oBtn2 = document.getElementById('oBth2');
	var oBtn3 = document.getElementById('oBth3');
	var oBtn4 = document.getElementById('oBth4');
	var oBtn5 = document.getElementById('oBth5');
	var oBtn6 = document.getElementById('oBth6');
	var oBtn7 = document.getElementById('oBth7');
	var oBtn8 = document.getElementById('oBtn8');
	var oBtn9 = document.getElementById('oBtn9');
	var oDemo = document.getElementById('demo');
	oBtn1.onclick = function (){
		oSet.style.display='block';
		document.getElementsByTagName("body")[0].style.background='#ccc';
	};
	red.onclick = function(){
		oDemo.style.background = 'red';
	};
	yellow.onclick = function(){
		oDemo.style.background = 'yellow';
	};
	green.onclick = function(){
		oDemo.style.background = 'green';
	};
	oBtn2.onclick = function(){
		oDemo.style.width = '300px';
	};
	oBtn3.onclick = function(){
		oDemo.style.width = '600px';
	};
	oBtn4.onclick = function(){
		oDemo.style.width = '900px';
	};
	oBtn5.onclick = function(){
		oDemo.style.height = '300px';
	};
	oBtn6.onclick = function(){
		oDemo.style.height = '600px';
	};
	oBtn7.onclick = function(){
		oDemo.style.height = '900px';
	};
	oBtn8.onclick = function(){
		oDemo.style.height = '100px';
		oDemo.style.width = '100px';
		oDemo.style.background = '#fff';
	};
	oBtn9.onclick = function (){
		oSet.style.display='none';
		document.getElementsByTagName("body")[0].style.background='#fff';
	};
}			
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 背景切換 大圖切換 按鈕控制 顏色選擇 顏色選擇器
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子