| |
<!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> |
