javascript - 使用没有嵌入 JS 或 CSS 的严格 javascript 隐藏和显示 DIV

Question

我搜索并搜索了如此多以前回答过的问题，但令我惊讶的是，没有一个能回答我想要完成的问题。使用 JQuery 这很容易，但我正在努力使用严格的 javascript。

我不能在 html 中嵌入任何 JS 或 CSS...

这是我目前所拥有的:

function showhide()
{
    var billingaddress = document.getElementById("billingaddress");
    if (billingaddress.style.display === "block")
        {
            billingaddress.style.display = "none";
        }
    else if (billingaddress.style.display === "none")
        {
            billingaddress.style.display = "block";
        }
}

function init () 
{   
    var billingcheckbox = document.getElementById("billing");

    if (billingcheckbox.checked)
        {
            showhide();
        } 
    else 
        {
            showhide();
        } 

默认使用 CSS 隐藏它。

干杯，

Answer 1

使用您提供的代码，可以像这样完成。

billingaddress.style.display 默认为空，无需比较即可在 if 中轻松查看。

function showhide() {
  if (billingaddress.style.display) billingaddress.style.display = ""
  else billingaddress.style.display = 'none';
}

var billingaddress = document.getElementById("billingaddress")
var billingcheckbox = document.getElementById("billing")
billingcheckbox.addEventListener('change', showhide)
billingcheckbox.checked = true
showhide()

<input type="checkbox" id="billing"/> Hide
<div id="billingaddress">Lorem Ipsum</div>