javascript - 同一组件中 js 和 css 的 html id 和类不起作用

Question

我通过选中两个单选按钮(是和否)来启用和禁用 div，但是当我将 id 和 class 放在同一个 div 中以及当我使用两个 div(一个用于 id 作为父级)时，我遇到了一个问题和另一个作为 child 的类(class))然后它工作正常。

function check1() {
  if (document.getElementById("isOutsourcing_yes").checked) {
    document.getElementById("s1").hidden = false;
  }
  if (document.getElementById("isOutsourcing_no").checked) {
    document.getElementById("s1").hidden = true;
  }
}

.padd_left {
  display: inline-block;
  padding-left: 40px;
}

<input type="radio" name="isOutsourcing" id="isOutsourcing_yes" onchange="check1()" checked> Yes
<input type="radio" name="isOutsourcing" id="isOutsourcing_no" onchange="check1()"> No
    
<div id="s1" class="padd_left">
    <h1>Hello..</h1>
</div>

上面的代码不起作用，但是当我如下替换最后一个 div 时，它工作正常

<div  class="padd_left">
    <div id="s1">
        <h1>Hello..</h1>
    </div>
</div>

Answer 1

内联 block 不是隐藏 block 的忠实拥护者。试试这个吧

document.getElementById("s1").style.visibility = "hidden"; // or visible

还要注意 display 属性和 visibility 属性之间的区别。如果您希望它完全从页面上消失而不留痕迹(除了在源代码中)，您可以将它设置为 display: none。 visibility: hidden 将占用相同的空间但不渲染任何内容。根据您希望页面的外观，您必须做出决定。

https://www.w3schools.com/jsref/prop_style_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp