[ The S/O-thread I based my solution upon ]
原始问题:尝试实现几乎相同的事情。但我无法让它发挥作用。我在这里缺少什么？当触发该函数时，我只是在 DOM 检查器中得到“未定义”:
更好地表述问题:函数触发。但它只是拒绝将样式应用于元素。我知道它是在最后一个警报方法触发时触发的。我还知道循环不起作用，因为 console.log 未触发(应触发两次)。样式应该被应用，因为它是由 JS 直接添加到元素上的，并且也有 !important 定义，并且它也是在从头生成对象的bundle.js 之后根据优先级加载的CSS 规则/操作顺序。
有两个类名为“fcc_test_ui”的元素..
代码和 https://codepen.io/Luggruff/pen/dQLYow :
HTML:
<!doctype html>
<html>
<head>
<title>TITLE HERE</title>
<!--METAs-->
<meta name="theme-color" content="#191c1f"/><!-- Update this! -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<!--Main CSS-->
<link rel="stylesheet" href="css.css?1543867233">
</head>
<body>
<!----------------- START --------------------->
<h1 id="title">Title with h1 text</h1>
<p id="description" onclick="classes()" style="top: 350px; position: absolute; border: 1px solid black;">Click me to trigger the classes() function!</p>
<!----------------- END --------------------->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
/* DON'T TOUCH THIS! */
#fcc_test_suite_wrapper {
position: relative !important;
z-index: 99999 !important;
position: absolute !important;
right: 0 !important;
left: unset !important;
display: block !important;
}
div.fcc_test_ui {
position: fixed;
left: 0;
top: unset !important;
position: fixed;
right: 0 !important;
left: unset !important;
bottom: 0 !important;
margin-bottom: 214px !important;
margin-right: 325px !important;
}
.fcc_test_ui {
position: fixed !important;
left: 0 !important;
top: unset !important;
position: fixed !important;
right: 0 !important;
left: unset !important;
bottom: 0 !important;
margin-bottom: 214px !important;
margin-right: 325px !important;
}
/* DON'T TOUCH THIS! */
JS:
document.getElementById("fcc_test_suite_wrapper").style.position = "";document.getElementById("fcc_test_suite_wrapper").style.position = "absolute";
function classes() {
var elements = document.getElementsByClassName("fcc_test_ui");
for (let i = 0; i < elements.length; i++) {
elements[i].style.position = "fixed !important";
elements[i].style.left = "0 !important";
elements[i].style.top = "unset !important";
elements[i].style.right = "0 !important";
elements[i].style.left = "unset !important";
elements[i].style.bottom = "0 !important";
elements[i].style.marginBottom = "214px !important";
elements[i].style.bottom = "325px !important";
console.log("Hey!"); //Just to check that they are looped through..
}
alert("Triggered");
}
完整站点:https://skriptkiddy.com/fcc/
编辑:除了实际的实时网站之外，还制作了一个 CodePen，并在此处发布了所有代码。
想要的最终结果如下所示。正如您还可以通过下图看到的那样，我尝试通过 JS 添加的 CSS 就是操作对象转到右下角所需添加的全部内容。因此，具有“fcc_test_ui”类的两个元素的大小并不重要。
更新 2:
我发现，当我将 "0px !important" 更改为 "0px" 时，通过 JS 定义样式效果很好(因此 !important code> 部分似乎毁了事情)。我通过简单地添加另外三个类名为“exampleClass”的 DIV 并运行代码来测试这一点，而字符串中不包含 !important 部分。然而，当我简单地将选择器从“exampleClass”更改回“fcc_test_ui”类时，它的行为会有所不同(即使 DOM 中有两个具有该类的 DIV，并且 DOM 中有三个具有“exampleClass”类的 DIV(所以他们的行为不应该有所不同):
(CodePen 也已更新为两个类之间的“热交换”，以便在 JS 第 12 行进行测试)
更新 3: 因此，元素 #shadow-root 似乎正在阻止对其自身内的元素进行任何操作，如添加具有相同内容的 DIV 所示类名之外，然后触发该函数:
我还发现了this S/O thread这谈到了操作#shadow-root 中的元素，但他们将其定义为变量，而女巫bundle.js 则没有。 #shadow-root 元素似乎是如何在bundle.js 中生成的:
document.body.appendChild(y),
HTMLElement.prototype.attachShadow ? y.attachShadow({
mode: "open"
}) : y);
..因此，我不知道如何正式“解决”根问题..
最佳答案
这是一个代码笔，您根本没有在代码中的任何地方调用该函数。
https://codepen.io/damPop/pen/VVNLmQ
<div class="fcc_test_ui" onclick="classes()">boom</div>
为了简洁起见，我在 div 属性中添加了一个点击处理程序right，正如他们所说:-)
您可以在任何地方调用该函数，在 window.setTimeout 之后、在 mouseenter 上、在单击某个元素等时。单击第一个 div 即可查看。
现在，您不会看到太多，因为您为所有元素提供了彼此堆叠的固定位置。这就是为什么我在点击时更改了颜色和一个背景。
阅读有关 chrome 控制台的内容，这应该解释未定义
Why does JavaScript variable declaration at console results in "undefined" being printed?
关于javascript - 无法循环遍历类名 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53600571/