javascript - HTML - 更改复选框选择的 div 最大宽度属性

Question

我有一个 checkbox 和一个 div。如果选中 checkbox，则 max-width 属性应该减小(div 应该缩小大小)，反之亦然。

function configureMarksTableWidth(checkbox) {
  var marksTable = document.getElementById("table-mark");
  alert(checkbox.checked);
  if (checkbox.checked === true) marksTable.style.maxWidth = "600px";
}

#marks-table {
  overflow-x: scroll;
  /*max-width: 600px;*/
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

<input type="checkbox" id="check" onclick="configureMarksTableWidth(this)">
<div id="marks-table" style="max-width: 900px">

场景是这样的: 如果选中 checkbox，则 div 的宽度应为 600px，未选中时，宽度应为 900px

我得到了在我的 JS 函数中调用的警报的结果，但 div 中没有任何变化

Answer 1

我们不需要javascript来做到这一点我们可以使用

#check:checked~#marks-table{ 最大宽度:600px； }

#marks-table {
  overflow-x: scroll;
  max-width: 900px;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

#check:checked~#marks-table {
  max-width: 600px;
}

<input type="checkbox" id="check">
<div id="marks-table">

但如果您仍然在 javascript 中执行此操作，那么您的 javascript 是正确的，您只是在 getElementById 中输入了错误的 id，您必须将 marks-table 而不是 table-mark 之类的放在

var marksTable = document.getElementById("marks-table");