Question

[ The S/O-thread I based my solution upon ]

原始问题：几乎是在尝试实现同一件事。但是我无法正常工作。我在这里想念什么？触发功能时，我在DOM检查器中只是得到“未定义”：

更好地提出问题：该函数将触发。但是它只是拒绝将样式应用于元素。我知道它是在最后一个警报方法触发时触发的。我也知道 循环不起作用 ，因为console.log没有被触发（应该被触发两次）。样式应该被应用，因为它是由JS直接添加到元素中的，并且具有!important定义，并且还应根据CSS规则/的优先级从一开始就在bundle.js生成之后生成对象。操作顺序。

有两个元素的类名称为“ 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就是所有需要添加的CSS，以便操纵对象进入右下角。因此，使用“ fcc_test_ui”类的两个元素的大小无关紧要。

更新2： 我发现，当我将"0px !important"更改为"0px"时，可以通过JS定义样式（因此!important部分似乎使事情变得糟透了）。我通过简单地再添加三个具有类名“ exampleClass”的DIV并运行字符串中没有!important部分的代码来测试了这一点。但是，当我简单地将选择器从“ exampleClass”更改回“ fcc_test_ui”类时，它的行为就会有所不同（即使DOM中该类有两个DIV，而DOM中有三个“ exampleClass”类（因此它们的行为不应有所不同）：（CodePen也已针对两个类之间的“热交换”进行了更新，以便在JS中的第12行进行测试）

更新3：因此，元素#shadow-root似乎正在阻止对其内部元素的任何操纵，如通过在其外部添加具有相同类名的DIV所展示的那样，然后触发功能：我还发现this S/O thread涉及到操纵＃shadow-root中的元素，但是他们将其定义为变量，witch bundle.js没有。在bundle.js中似乎如何生成＃shadow-root元素：

document.body.appendChild(y),
    HTMLElement.prototype.attachShadow ? y.attachShadow({
        mode: "open"
    }) : y);

..因此，我不知道如何正式“解决”根问题。

Answer 1

这是一支代码笔，您只是没有在代码中的任何地方调用该函数。

https://codepen.io/damPop/pen/VVNLmQ

<div class="fcc_test_ui" onclick="classes()">boom</div>

为简便起见，我在div属性中添加了一个点击处理程序，就像他们说的那样：-）

您可以在window.setTimeout之后，在mousenter上，在单击某些元素等之后的任何位置调用该函数。单击第一个div即可查看。

现在，您将看不到太多，因为您将给ll个元素一个固定的位置，使它们彼此堆叠。这就是为什么我在点击时更改了颜色并更改了一个背景。

阅读有关chrome控制台的内容，这应该解释未定义的内容

Why does JavaScript variable declaration at console results in "undefined" being printed?

Answer 2

实际上，不需要遍历类

只需按照以下两个简单步骤

1：将所有样式添加到CSS类示例.test { margin-bottom: 50px; color: red;}等

2：在您的页面中添加以下脚本

<script>
 $(document).ready(function(){
 var element = $(".fcc_test_ui");
 element.addClass("testClass");
});

</script>

这是实现所需目标的最简单，最简单的方法希望这能回答您的问题

无法遍历JavaScript的classNames

2 个答案: