方块样式

最新推荐文章于 2022-09-02 11:42:55 发布

as1405101

最新推荐文章于 2022-09-02 11:42:55 发布

阅读量212

点赞数

原文链接：http://www.cnblogs.com/qilin0/p/11512364.html

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>方块样式设置</title>
	<style>
	div{
	width: 150px;
	height: 150px;
	background-color: skyblue;
	margin-top: 10px;

	}
	input,.confirm,select{
	display: none;
	}
	span{
	font-size: 14px;
	color: red;
	}
	</style>
	</head>
	<body>
	<button>改变宽度</button>
	<button>改变高度</button>
	<button>改变背景颜色</button>
	<button>添加border</button>
	<button>调节圆角</button>
	<input type="text" name="" id="">
	<input type="color" name="" id="">
	<select name="" id="">
	<option value="solid">solid</option>
	<option value="dashed">dashed</option>
	<option value="dotted">dotted</option>
	<option value="double">double</option>
	</select>
	<input type="range" name="" id="" min="0" max="50">
	<button class="confirm">确认</button>
	<span></span>
	<div></div>
	<script>
	// 获取DOM元素
	let btns = document.getElementsByTagName("button");
	let input = document.getElementsByTagName("input");
	let select = document.getElementsByTagName("select")[0];
	let span = document.getElementsByTagName("span")[0];
	let confirm = document.getElementsByClassName("confirm")[0];
	let div = document.getElementsByTagName("div")[0];
	// 给每一个按钮绑定事件
	btns[0].onclick = function(){
	input[0].style.display = "inline";
	input[1].style.display = "none";
	input[2].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	span.innerHTML = "输入宽度";
	}
	btns[1].onclick = function(){
	input[0].style.display = "inline";
	input[1].style.display = "none";
	input[2].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	span.innerHTML = "输入高度";
	}
	btns[2].onclick = function(){
	input[0].style.display = "none";
	input[1].style.display = "inline";
	input[2].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	span.innerHTML = "选择颜色";
	}
	btns[3].onclick = function(){
	input[0].style.display = "inline";
	input[1].style.display = "inline";
	select.style.display = "inline";
	confirm.style.display = "inline";
	input[2].style.display = "none";
	span.innerHTML = "设置border的样式";
	}
	btns[4].onclick = function(){
	input[0].style.display = "none";
	input[1].style.display = "none";
	select.style.display = "none";
	confirm.style.display = "inline";
	input[2].style.display = "inline";
	span.innerHTML = "设置圆角";
	}
	// 改变宽度
	let changeWidth = function(){
	if(span.innerHTML === "输入宽度" \|\| span.innerHTML === "输入的宽度不正确，请重新输入")
	{
	let setWidth = input[0].value;
	if(setWidth <= 0 \|\| setWidth === "")
	{
	span.innerHTML = "输入的宽度不正确，请重新输入";
	}
	else{
	div.style.width = setWidth + "px";
	span.innerHTML = "输入宽度";
	}
	}
	}
	// 改变高度
	let changeHeight = function(){
	if(span.innerHTML === "输入高度" \|\| span.innerHTML === "输入的高度不正确，请重新输入")
	{
	let setHeight = input[0].value;
	if(setHeight <= 0 \|\| setHeight === "")
	{
	span.innerHTML = "输入的高度不正确，请重新输入";
	}
	else{
	div.style.height = setHeight + "px";
	span.innerHTML = "输入高度";
	}
	}
	}
	// 改变颜色
	let changeColor = function(){
	if(span.innerHTML === "选择颜色")
	{
	let setColor = input[1].value;
	div.style.backgroundColor = setColor;
	}
	}
	// 设置border样式
	let changeBorder = function(){
	if(span.innerHTML === "设置border的样式" \|\| span.innerHTML === "border宽度输入有误，请重新输入")
	{
	let setBorderWidth = input[0].value;
	let setColor = input[1].value;
	let setStyle = select.value;
	if(setBorderWidth <= 0 \|\| setBorderWidth === "")
	{
	span.innerHTML = "border宽度输入有误，请重新输入";
	}
	else{
	div.style.borderWidth = setBorderWidth + "px";
	div.style.borderColor = setColor;
	div.style.borderStyle = setStyle;
	span.innerHTML = "设置border的样式";
	}
	}
	}
	// 设置圆角
	let changeRadius = function(){
	if(span.innerHTML === "设置圆角")
	{
	let radius = input[2].value;
	div.style.borderRadius = radius + "%";
	}
	}
	// 给confirm按钮绑定多个事件
	confirm.addEventListener("click",changeWidth,false);
	confirm.addEventListener("click",changeHeight,false);
	confirm.addEventListener("click",changeColor,false);
	confirm.addEventListener("click",changeBorder,false);
	confirm.addEventListener("click",changeRadius,false);
	</script>
	</body>
	</html>