Ich habe das folgende div-Element

<div style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

Gibt es eine Möglichkeit, das Stilattribut dieses div-Tags mithilfe von JavaScript zu ändern?

Speziell möchte ich folgendes tun:

Setzen Sie dieses Stilattribut auf eine andere Zeichenfolge, z. B. style = "test"

Erstellen Sie ein neues Stilattribut und ersetzen Sie dieses Attribut durch das neue Attribut

Dh:

var new_style_a = document.createAttribute("style");
(somehow insert this new attribute into the div tag)
3
SivaDotRender 13 Aug. 2015 im 17:44

3 Antworten

Beste Antwort

Sie müssen zuerst einen JS-Verweis auf Ihr div erhalten. Der Einfachheit halber geben Sie ihm zunächst eine ID.

<div id='myDiv' style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

Dann in JS ...

document.getElementById('myDiv').style.color = '#FF0000';

BEARBEITEN: Um Ihre bearbeitete Frage wiederzugeben. Wenn Sie nur den Wert eines Attributs auf eine Zeichenfolge festlegen möchten (für den Datensatz nicht der beste Weg, wenn Sie dies tun, um den Stil zu beeinflussen), können Sie dies tun.

document.getElementById('myDiv').setAttribute('style','somestring');

WIEDER BEARBEITEN; Wenn Sie darauf bestehen, document.createAttribute zu verwenden ...

var attr = document.createAttribute('style');
attr.value = 'somestring';
document.getElementById('myDiv').setAttributeNode(attr);
4
Dal Hundal 13 Aug. 2015 im 14:52

Gibt es eine Möglichkeit, das Stilattribut dieses div-Tags mithilfe von JavaScript zu ändern? Insbesondere möchte ich Folgendes tun: Setzen Sie dieses Stilattribut auf eine andere Zeichenfolge, z. B. style = "test".

Wenn Sie das vorhandene Stilattribut für das Element ersetzen (oder eines erstellen möchten, wenn es nicht vorhanden ist), verwenden Sie:

document.getElementById('elemId').setAttribute('style','width:100px;');

Wenn Sie den vorhandenen Regeln eine neue Stileigenschaft hinzufügen möchten, lautet dies wie folgt:

document.getElementById('elemId').style.setAttribute('width', '150px');

Sie müssen in der Lage sein, auf dieses div zu verweisen. Am besten geben Sie ihm ein eindeutiges id und verwenden getElementById, um darauf zu verweisen.

2
Abhitalks 13 Aug. 2015 im 14:53

Sie müssen JS dazu bringen, Ihr div-Element anhand der ID zu referenzieren.

HTML

<div id="elem-change" style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

JS

if (document.getElementById("elem-change")) {
         document.getElementById("elem-change").style.color = "#0000FF";
}

Oder

document.getElementById('elem-change').setAttribute('style','color :#0000FF');

JQUERY

$("#elem-change").css("color", "#0000FF");
-2
Darren Willows 13 Aug. 2015 im 14:56