classList.toggle in Javascript

classList.toggle in Javascript

本文关键字：Javascript in toggle classList      更新时间：2023-09-26


当类不存在时，我正在尝试将 .hidden 分配给某些选项，如果该类已分配给此元素，则删除类 .hidden 。换句话说 - 我只想切换类。

我写了代码

var isHidden = document.getElementById("inputSelected").classList.toggle("hidden");

但它不起作用。但是当我控制台日志类列表时，包含 

var isHidden = document.getElementById("inputSelected").classList.contains("hidden");

它返回 false - 这意味着，它没有分配这个类。那么为什么它不切换呢？

更多代码：

<!DOCTYPE html>
<html>
<head>
<title>Kalkulator dat</title>
<meta name="description" content="Kalkulator dat. Ile dni minęło od wskazanej daty? Jaka będzie data za daną ilość dni?">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>
<body>
<h1>Kalkulator dat</h1>
<div id="daysPassed">
    <h2>Ile pełnych dni minęło?</h2>
    <form id=daysPassedForm">
        <label for="firstDateDP">Data początkowa:</label>
        <input type="date" id="firstDate">
        <fieldset>
            <input type="radio" id="toToday" name="todayOrSelected">    
            <label for="toToday">Do dziś</label>
            <input type="radio" id="toSelected" name="todayOrSelected"> 
            <label for="toSelected">Do wskazanej daty</label> 
            <p id="inputSelected">(<input type="date" id="selectedEndDate">)</p>
        </fieldset>
        <input type="submit" value="Oblicz">
        </form>
</div>
<div id="daysPassedResult" class="result">
    <p id="daysPassedInfo">Od wskazanej daty minęło x dni</p>
</div>
<div id="dateIndicate">
    <h2>Jaka będzie data?</h2>
    <form id="dateIndicateForm">
        <ul>
            <li>
                <label for="firstDateDI"><span>Data początkowa:</span></label>
                <input type="date" id="firstDateDI">
            </li>
            <li>
            <label for="numberOfDays"><span>Liczba pełnych dni:</span></label>
            <input type="number" id="numberOfDays" step="1">
            </li>
            <li>
            <input type="submit" value="Oblicz">
            </li>
        </ul>
    </form>
</div>
<div id="dateIndicateResult" class="result">
    <p id="dateIndicateResult">Po x dniach od y będzie</p>
</div>
<script src="script.js"></script>
</body>
</html>

div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
margin-bottom: 7px;
}
body {
margin: 0 auto;
width: 40%;
background-color: #FFCA51;
}
div {
padding: 5px;
border-radius: 15px;
}
p {
margin: 8px 0 8px 0;
}
ul {
list-style-type: none;
padding: 0;
}
h1 {
text-align: center;}
fieldset {
border: none;
}
input {
margin: 2px;
padding: 1px;
}
span {
width: 115px;
text-align: right;
display: inline-block;
}

#daysPassed {
background-color: #E8A849;
padding-left: 16px;
}
#inputSelected {
margin: 0 0 0 8px;
display: inline-block;
}
#daysPassedResult {
background-color: #FFA75D;
}
#dateIndicate {
background-color: #E87A49;
padding-left: 16px;
margin-top: 20px;
}
#dateIndicateResult {
background-color: #FF6D51;
}
.result {
margin: 8px 0 8px 16px;
padding-left: 12px;
max-width: 50%;
}
.hidden {
display: none;}

function preparePage() {
    document.getElementById("inputSelected").classList.toggle("hidden");
    document.getElementById("daysPassedResult").classList.toggle("hidden");
    document.getElementById("dateIndicateResult").classList.toggle("hidden");
}
window.onload = function() {
    preparePage();
};

现在准备页面的第二行和第三行有效，但第一行(#inputselected(不起作用

来自 Mozilla 的 DOMTokenList 参考：

toggle ( token ) - 从字符串中删除token并返回 false。如果token不存在，则添加它并返回 true

您的代码确实有效，但似乎问题不是由 DOMTokenList .toggle() 函数引起的，而是由 CSS ID #inputSelected 引起的：

#inputSelected {
  margin: 0 0 0 8px;
  display: inline-block; /* will never let .hidden to actually set the "display: none". */
}
.hidden {
  display: none;
}

修复它的一种简单方法是定义：

.hidden {
  display: none !important;
}

或在单独的类中定义display: inline-block;。

如果问题真的是.toggle，DOMTokenList仍然有：

  • .contains
  • .add
  • .remove

否则，您可以使用 jQuery 或手动管理element.className。

相关文章：