Ich habe eine Sammlung von Kontrollkästchen, die ich von Bootstrap erhalten habe, der mehr als Schaltflächen als Kontrollkästchen erscheint, aber ihr überprüfter Status hebt jedoch noch auf Klicks um. Ich habe einen Texteingabe in der Form, mit dem der Benutzer Kontrollkästchen mit Etiketten und Werten hinzufügen kann, die der Benutzereingabe entsprechen. Alle Kontrollkästchen befinden sich in derselben div -Komponente.

Ich verwende JavaScript, um das neue Kontrollkästchen dynamisch zu erstellen und an ein {{{{label anzuhängen, das an das {{{{{{{{{{{{{{{{{{{{{{{{{}} angehängt wird, das die Kontrollkästchen angehängt wird. Das neue Checkbox wird auf der Seite angezeigt, aber ohne das Styling, das im Kopf des HTML-Dokuments verknüpft ist. Wie kann ich das Styling an das neue Kontrollkästchen anwenden?

Hier ist das JavaScript, das ich verwende:

function addRestriction() {
                let userInput = document.getElementById("add_other").value; // get user input
                let newBox = document.createElement("input");
                newBox.type = "checkbox";
                newBox.autocomplete = 'off';
                newBox.name = 'diet_button';
                newBox.value = userInput;
                let newLabel = document.createElement("label");
                newLabel.class = "btn btn-outline-secondary active";
                newLabel.appendChild(newBox);
                newLabel.appendChild(document.createTextNode(userInput));
                document.getElementById('diet_restrictions').appendChild(newLabel);
                document.getElementById('add_other').value = '';
            }
0
Owen Glahn 3 Juni 2021 im 00:46

1 Antwort

Beste Antwort

Beide Antworten sind korrekt:

element.className = "new-class"

Setzt diese Elemente nur den Klassennamen in "New-Class" ein, während:

element.classList.add("new-class")

Fügt eine neue Klasse zu bereits vorhandenen Klassen hinzu. Diese Funktion ist möglicherweise nützlich, wenn Sie Klassen in Ihren neu erstellten Kontrollkästchen weiter ausbauen werden.

Diese Geige zeigt die Unterschiede.

  1. .classname ref.
  2. .classlist REF.
1
Marelons 2 Juni 2021 im 23:17