Dynamisches Ändern des Elementstilattributs mithilfe von JavaScript

Ich habe ein bestimmtes Stylesheet für eine Div. Jetzt möchte ich ein Attribut von div dynamisch mit js ändern.

Wie kann ich es tun?

document.getElementById("xyz").style.padding-top = "10px";

Ist das richtig?

Es ist fast richtig.

Da -es sich um einen Javascript-Operator handelt, kann dies in Eigenschaftsnamen nicht wirklich vorkommen. Wenn Sie eine Einstellung borderoder etwas Ähnliches verwenden würden, würde Ihr Code einwandfrei funktionieren.

Das, woran Sie sich jedoch für padding-topund für jeden Attributnamen mit Bindestrich erinnern müssen , ist, dass Sie in Javascript den Bindestrich entfernen und den nächsten Buchstaben in Großbuchstaben schreiben, in Ihrem Fall also paddingTop.

Es gibt einige andere Ausnahmen. JavaScript enthält einige reservierte Wörter, sodass Sie diese beispielsweise nicht festlegen können float. Stattdessen müssen Sie in einigen Browsern cssFloatund in anderen verwenden styleFloat. Für solche Unstimmigkeiten wird empfohlen, ein Framework wie jQuery zu verwenden, das Browser-Inkompatibilitäten für Sie behandelt ...

Wenn Sie die Strichnotation für Stileigenschaften verwenden möchten, können Sie neben anderen Antworten auch Folgendes verwenden:

document.getElementById("xyz").style["padding-top"] = "10px";

Ich löse ein ähnliches Problem mit:

document.getElementById("xyz").style.padding = "10px 0 0 0";

Hoffentlich hilft das.

Es gibt auch eine style.setPropertyFunktion:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

Angenommen, Sie haben HTML wie folgt:

<div id='thediv'></div>

Wenn Sie das Stilattribut dieses Div ändern möchten, verwenden Sie

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

Ersetzen [ATTRIBUTE]Sie durch das gewünschte Stilattribut. Denken Sie daran, '-' zu entfernen und den folgenden Buchstaben in Großbuchstaben zu schreiben.

Beispiele

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

document.getElementById("xyz").style.padding-top = '10px';

wird sein

document.getElementById("xyz").style["paddingTop"] = '10px';

Ich würde empfehlen, eine Funktion zu verwenden, die die Element-ID und ein Objekt mit den CSS-Eigenschaften akzeptiert, um dies zu handhaben. Auf diese Weise schreiben Sie mehrere Stile gleichzeitig und verwenden die Standard-CSS-Eigenschaftssyntax.

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

Besser noch, Sie könnten die Stile in einer Variablen speichern, was die Verwaltung von Immobilien erheblich vereinfacht, z

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

hoffentlich hilft das

Überrascht, dass ich die unten stehende Lösung für den Abfrageselektor nicht gesehen habe.

document.querySelector('#xyz').style.paddingTop = "10px"

CSSStyleDeclaration- Lösungen, ein Beispiel für die akzeptierte Antwort

document.getElementById('xyz').style.paddingTop = "10px";

document.getElementById("xyz").setAttribute('style','padding-top:10px');

würde auch den Job machen.

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

funktioniert bei mir