| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>方块样式设置</title> | |
| <style> | |
| div{ | |
| 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> |