单击复选框后使用 ID 砂砾模板设置 div答案

【问题标题】：Set div with an ID grit template after clicking checkbox单击复选框后使用 ID 砂砾模板设置 div
【发布时间】：2021-09-27 22:54:31
【问题描述】：

我有一个问题。我有一个简单的 chekcbox，在 html 中看起来像

<label class="container__control--checkbox">
    <input type="checkbox" checked="checked" id="presentation_full_screen" class="container__control" onchange="_handleMainLayout()" />
    <span>CLICK</span>
 </label>

所以当我点击复选框时，我会启动这个类型脚本：

   _handleMainLayout() {
        const layoutContainer = <HTMLInputElement>document.getElementById("main_layout");
        const hideCommunicationCheckbox <HTMLInputElement>document.getElementById("presentation_full_screen");
        if (hideCommunicationCheckbox.checked) {
            layoutContainer.removeAttribute("style");
        } else {
            layoutContainer.style.gridTemplateColumns = "1fr";
        }
    }

那么它在主布局（id：main_layout）上将模板从 1 列设置为 2 列取决于此 id 是否选中了复选框，并且效果很好。

但我想知道，css 中有那些选择器：checked 和 not()。所以事情是，具有 id 主布局的元素在 DOM 树上，问题是我可以使用这些选择器或任何其他 css/scss 技巧以某种方式获取该元素并切换此网格模板列吗？

类似

.container__control :checked {
   //get div with ID and set its grid-template-colum
 }
.container__control :not(:checked) {
   //get div with ID and set its grid-template-colum
}

还是我只剩下 JS 解决方案了？

【问题讨论】：

标签： javascript html css typescript

【解决方案1】：

您完全可以只使用 CSS 来做到这一点。 “技巧”是插入<input> 元素的位置。感谢标签属性for，您不需要将<input> 和<label> 彼此靠近。但是，<input> 必须放在 #main_layout 之前和同一个 DOM “分支”上，以便使用通用 (~) 或相邻 (+) 同级组合器。

#main_layout {
  height: 20px;
  background-color: red;
}

:checked + #main_layout {
  background-color: blue;
}

<label for="checkox">Click me</label>

<input type="checkbox" name="" id="checkox" hidden>
<div id="main_layout"></div>

在这种情况下不需要:not()

【讨论】：