JavaScript 无法在 WordPress 中按 ID 选择 DOM 元素

Question

JavaScript是否有办法与WordPress页面上的DOM进行交互?还是只能通过jQuery实现交互?

header.php中的Button元素:

<div id="settings" class="special-menu__item btn-settings">
<button class="special-menu__title">
<i style="margin-right: 10px" class="fa fa-cog" aria-hidden="true"></i>
Настройки
</button>
</div>

JavaScript代码:

const settingButton = document.getElementById("settings");
let toggle = false;
settingButton.addEventListener("click", function _f() {
if (toggle === false) {
settingButton.classList.add("active");
settingOpen.classList.add("open");
} else {
settingButton.classList.remove("active");
settingOpen.classList.remove("open");
}
toggle = !toggle;
removeEventListener("click", _f);
});

Answer 1

我也有这个问题。

在控制台中，我可以用getElementById或querySelector抓取任何我想要的元素。但是当我在自定义JS代码中选择它时，它将为空。

要解决这个问题，您可以在加载事件侦听器中添加代码。这样，在页面加载之后，您就可以运行代码并按照自己的意愿更改DOM元素。它可能不是最实用的东西，但它是有效的。

的例子:

window.addEventListener('load', () => {
const element = document.querySelector('#elementId');
console.log('element I selected:', element)
})