“classList.add”不會將類添加到 div 和表單元素
[英]“classList.add” doesn't add a class to a div and a form elements
問題描述
我目前遇到了無法通過 classList.add 方法向 div/form 元素添加類的問題。 同樣的方法非常適用於輸入或按鈕等其他元素。 但是，div 和表單沒有任何神奇之處。
請忽略 JS 代碼是在 HTML 中外部鏈接的。 這里所有重要的是這兩行不起作用：
form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";
(function(){ function formCreation () { //Here I add elements" let container = document.createElement('div'); let form = document.createElement('form'); let input = document.createElement('input'); let buttonWrapper= document.createElement('div'); let buttonCreator = document.createElement('button'); let buttonRemover = document.createElement('button'); input.placeholder = 'Enter your new task'; buttonRemover.textContent = 'Delete' buttonCreator.textContent = 'Add'; //Here I'm trying to add classess// form.classList.add = "form"; //It won't work for the form' buttonWrapper.classList.add = "buttonContainer"; //Neither it would work for the buttonWraper div" input.classList.add('input'); buttonCreator.classList.add('creator'); buttonRemover.classList.add('remover') container.append(form); buttonWrapper.append(buttonCreator); buttonWrapper.append(buttonRemover); form.append(input); form.append(buttonWrapper); return { form, input, buttonCreator, }; } document.addEventListener('DOMContentLoaded', function () { let containerApp = document.getElementById('container'); let heading = createAppTitle('Things to be done'); let todoItem = formCreation(); let listItself = todoListCreator(); containerApp.append(heading); containerApp.append(todoItem.form); containerApp.append(listItself); }); }());
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="container" class="container"></div> <script src="index.js"></script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2021-06-22 19:21:34
我不明白這段代碼如何處理任何元素類型。
格式：
form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";
是錯的。
嘗試
form.classList.add("formList");
buttonWrapper.classList.add("buttonContainer");
有關使用 classList 及其屬性的信息，請參閱MDN 。
classList.toggle（'class'，true）vs classList.add
[英]classList.toggle('class', true) vs classList.add
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.