原生js div设置宽度_div设置背景颜色代码



201 802 268



特效描述:原生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

加群请备注:从官网了解到