howto 在线编辑器 | howto代码测试

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.cainiaomax.com/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>* {
  box-sizing: border-box;
}

/* 创建两个相邻浮动的相等列 */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* 清除列后的浮点数 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 按钮样式 */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>

<h2>列表视图或网格视图</h2>

<p>单击按钮可选择列表视图或网格视图。</p>

// 声明一个循环变量
var i;

// List View
function listView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "100%";
  }
}

// Grid View
function gridView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "50%";
  }
}

/* Optional：将活动类添加到当前按钮（突出显示它）*/
var container = document.getElementById("btnContainer");
var btns = container.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

</body>
</html>

报个问题: