Dynamisches Ändern des Elementstilattributs mithilfe von JavaScript

117

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?

javascript html css

— jslearner
quelle

123

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 ...

— David Hedlund
quelle

213

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";

— KooiInc
quelle

3

Ich auch nicht, dies ist wirklich nützlich für dynamische Funktionen. Man kann den Stil als Zeichenfolgenwert übergeben und dann den Stil und den Wert festlegen. Tolle Lösung.

— Raphie

1

Wenn Sie das hinzufügen, was @raphie sagt, können Sie es auch verwenden document.getElementById("xyz").style["paddingTop"] = '10px'.

— Zahnbürste

1

@anunkjn: Du hast recht. Ich würde sagen, dass es in FF nicht mehr funktioniert . Welches ist, na ja ... seltsam.

— KooiInc

17

Ich löse ein ähnliches Problem mit:

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

Hoffentlich hilft das.

— Vorsitzender
quelle

2

Der Nachteil dieser Vorgehensweise ist, dass Sie die Polsterung für andere Seiten auf einstellen 0. Und manchmal willst du das nicht.

— Gustavo Straube

17

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');

— icl7126
quelle

15

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

— JohnP
quelle

1

Wie in der akzeptierten Antwort angegeben, gibt es einige Ausnahmen. Wie float.

— Gustavo Straube

8

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

wird sein

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

— T.Todua
quelle

7

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

— rjbultitude
quelle

7

Ü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";

— Rama
quelle

5

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

würde auch den Job machen.

— Pinkesh Badjatiya
quelle

5

Der Nachteil dieser Methode ist, dass Sie jeden anderen Inline-Stil entfernen. Das liegt daran, dass Sie den gesamten Attributwert ersetzen. Ich denke, es ist eine bessere Lösung, den aktuellen Stil zu erhalten, nach einem vorhandenen Wert für die Eigenschaft zu suchen, die Sie festlegen möchten, und dann den gewünschten Wert hinzuzufügen / durch diesen zu ersetzen.

— Gustavo Straube

Einverstanden. Das OP brauchte jedoch eine Lösung, die näher an dem lag, was er bereits tat, ohne Ihren Anwendungsfall zu berücksichtigen. Dies ist einer der einfachsten Wege, um dies zu erreichen, aber es ist sicherlich nicht der beste.

— Pinkesh Badjatiya

@GustavoStraube, ich würde es nicht als Nachteil bezeichnen. In vielen Fällen ist dies genau das, was der Entwickler tun möchte - dh den Stil des Elements überschreiben. Ich würde es eine Folge davon nennen, es so zu machen.

— stwr667

5

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

funktioniert bei mir

— Hyperion
quelle