- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图在类不存在时将 .hidden 分配给某些元素,如果此类已分配给该元素,则删除类 .hidden 。换句话说 - 我只想切换类。
我写代码
var isHidden = document.getElementById("inputSelected").classList.toggle("hidden");
但它不起作用。但是当我控制台日志 classList.contains
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();
};
现在 preparePage 的第二行和第三行有效,但第一行 (#inputselected) 无效
最佳答案
DOMTokenList来自 Mozilla 的引用:
toggle ( token )
- removestoken
from string and returns false. Iftoken
doesn't exist it's added and the function returns 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
。
关于javascript - Javascript 中的 classList.toggle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25463653/
这个问题已经有答案了: Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone? (4 个回答) 已关闭10
有没有直接的使用方法--toggle和 --no-toggle使用 Python 的 argparse 标记? 现在我正在使用类似于以下内容的东西: import argparse parser =
我正在尝试实现 jquery UI 切换功能。 这是我目前所拥有的: http://jsfiddle.net/PauWy/470/ 我试图做到这一点,当我点击 Item1 时,会出现“+”和“-”,我
现在 toggle(...) 是 deprecated in jQuery 1.8然后removed in jQuery 1.9 在常规中可以使用什么(除了使用 jQuery 迁移脚本)来代替具有相同
我在使用 bootstrap 的切换功能时遇到问题。 这个想法是让一个复选框(引导切换)打开或关闭第二个复选框(引导切换)。遗憾的是,它尚未在网页上运行。我注意到,通过删除“data-toggle='
我有一些 DIV,我正在使用 JQuery 使用 toggle() 函数来隐藏和显示它们。这一直运行良好。 但我只是认识到其中一些 DIV 之间的一些关系,这使我可以将其中一些 DIV 分组到一个类中
我想要三个 SwiftUI 切换开关,如果一个打开,另外两个关闭。 使用 UIKit 执行此类操作的旧方法是 didSet{},这不是 SwiftUI 的正确方法。我不知道是否有必要深入研究Combi
我想做的是:当达到一定数量的页面滑动时,使网站的顶部栏向下切换。即,当用户向下滑动 328px 时,顶部栏向下滑动并固定在顶部。 问题是当用户向下滑动到328px的时候,top bar div就开始上
上下文 我正在使用 Bootstrap 主题,现在我注意到,当主题更新到 Bootstrap 5 时,所有 data-toggle 属性都被替换为 data-bs-toggle (除了一个,哪个元素仍
我有一个来自 Bootstrap 示例的“标准”测试导航栏,但是使用 active_links gem导航栏 => 品牌 - 关于 - 第 1 页 - 第 2 页 - 页面(第 3 页 - 第 4 页
我只是无法理解 Eclipse 中菜单的 Run 按钮下的两个选项。通常断点不是指一行吗?我意识到可能存在这种情况: if (x >= 0 && x = 0 && y < 4) source
如果有任何反馈或见解可以帮助我解决我面临的最后一个问题,我将不胜感激。我的代码很庞大。 我有 4 个开关。打开时的每个切换都会导致标签增加 1。当我关闭并重新打开应用程序时,我还设法保存了切换位置和标
我目前正在开发一个侧边栏菜单,在该菜单中我切换类别上的“选定”类别,该类别的类别名称为“sidebar-category”。 使用 jQuery,我可以轻松实现我想要的目标:切换“选定”类后(如果我单
我正在尝试玩周围的游戏,但我对 jquery 完全是新手!所以我确实需要一些帮助:) $(function() { $('#switch').on('click', function(
所以我需要下面的当前脚本,以便能够切换。 目前,该脚本仅在按住 F8 键时起作用...这违背了 afk 脚本的要点。哈哈 无论如何,这是脚本: $F8:: Loop { if not Get
在创建 jQuery 下拉菜单时,我遇到了一个最奇怪的问题 - 已隐藏的元素仍然影响页面。为什么会发生这种情况,我该如何解决?它通过阻止按钮的一部分来影响功能,迫使人们从未阻止的部分调用该功能。例如;
我有一个 Logo ,当单击菜单时,字母 T 和 H 以及字母 animatie 彼此相距约 400px。当他们制作动画时,导航会出现:eas-in,但是当我再次单击汉堡菜单时,我希望导航以相同的动画
我正在尝试为“事件”CSS 类切换“禁用”,以使某些 SVG 的填充属性在单击时发生变化。 我能够正确更改第一个元素,但是当尝试对第二个和第三个 SVG 进行相同更改时,它会更改第一个 div 中第一
我有一个小的下拉列表,其中包含从 0 到 4 的数字(我可以添加更多),例如数字 4 是 4 年的数据。如果我选择 4,我会得到 4 行日期选择器,供用户选择开始和结束日期。 它使用 for 循环,并
我有几个 powershell 函数,可以执行诸如检查程序是否打开然后关闭之类的操作。或者,如果程序关闭,该函数将打开它。这些函数被恰本地命名为Toggle-Something。我在 Windows
我是一名优秀的程序员,十分优秀!