方块样式

  <!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>
posted @ 2019-09-12 15:58  小样Q  阅读(249)  评论(0)    收藏  举报