Wie Variablen für Stile in HTML verwenden

I Szenario haben folgende:Wie Variablen für Stile in HTML verwenden

Funktion 1:

myFunction(obj){ 
    //returns HTML code as string 
}

Beispiel:

<div> 
 
    <div style="color: black; margin-bottom: 10px;"> 
 
     <h3 style="font-size: 15px; display:inline;">Pipeline : </h3> 
 
     <h3 style="font-size: 20px; display:inline;"> '+obj.name+' </h3> 
 
     <div id="status" style="display:inline; font-size:10px;"></div> 
 
    </div> 
 
    <div style="margin-bottom: 10px;"> 
 
     <h3 style="font-size: 15px; display:inline;">Status message : </h3> 
 
     <h3 style="font-size: 20px; display:inline;"> '+obj.statusMessage+' </h3> 
 
    </div> 
 
</div>

Funktion 2: Anrufe Funktion 1 durch Übergeben des Objekts;

callmyFunction(){ 
    obj={ 
    "name": "abc", 
    "statusMessage" : "fdsffs" 
    ... 
    } 
    var str = myFunction(obj); 
    document.getElementById("demo").innerHTML=str; 
}

Mein html hat ein div mit id = "Demo"

<div id="demo"></div>

Jetzt möchte ich dynamisch die Farbe eines div ändern mit id = "Status" von myFuncton(), die Teil von Die zurückgegebene HTML-Zeichenfolge. Etwas wie folgt aus: (Aber das wirft Fehler Stil ‚Kann Eigenschaft nicht lesen‚‘von null bei myFunction (: 17: 34)‘)

document.getElementById("status").style.color=variable;

Hier Variable wird auf den obj Eigenschaften entschieden basierend dynamisch (obj übergeben wird als Parameter)

Wenn es eine Möglichkeit, Variablen zu Stil-Eigenschaft zu binden, in der Zeichenfolge zurückgegeben dann wäre das Problem

wie gelöst werden:

<div id="status" style="display:inline; font-size:10px; color= 
{{variable}}"></div>

Ich kann CSS-Klassen nicht verwenden, da es sich um E-Mails handelt. Und ich weiß, dass ich CSS für jeden anderen Fall verwenden kann.

Und der obige Code ist Pseudocode. Suchen Sie nicht nach syntak-Fehlern.

Quelle

2017-05-08 Darshan D

Wenn Sie nur '# status' Farbe geben wollen (Sie haben einen richtigen Selektor), warum verwenden Sie nicht stattdessen css? –

Es wird nicht empfohlen, CSS-Klassen für E-Mails zu verwenden. Alles muss inline CSS –

Sie sollten dies in Frage erwähnt haben. –

Fügen Sie Ihr JavaScript in den Bereich <body> hinzu. Wenn Sie die Funktion ausführen, findet das DOM kein Element mit der ID status und wird als null zurückgegeben. Wenn Sie Ihre Skripte in den Body-Inhalt verschieben, funktioniert es. Schau dir die folgende Geige an.

Wrap JavaScript inside BODY

In der obigen Geige habe ich den JavaScript-Lasttyp als No wrap - in <body> gewählt, und ich kann in der Lage, die Farbe wechselt zu sehen. Wenn ich den Lasttyp zu No wrap - in <head> ändere, bekomme ich den Nullfehler.

Quelle

2017-05-09 03:45:13

Warum nicht CSS-Klassen verwenden? Dafür sind sie da. Sie definieren Ihre Stile in Ihren Stylesheets. Und dann fügen Sie die relevanten Klassen mit javascipt hinzu (document.getElementById("status").classList.add("js-red-color")).

Ich Präfix normalerweise meine CSS-Klassen mit js-, so dass ich weiß, dass sie dynamisch hinzugefügt werden.

Quelle

2017-05-08 06:04:03 gabriel

Sie haben Funktion Schlüsselwort vor Ihrem Funktionsnamen verpasst. Bitte überprüfen Sie das folgende Code-Snippet.

function myFunction(obj){ 
 
     var str = '                 \ 
 
      <div>                  \ 
 
      <div style="color: black; margin-bottom: 10px;">       \ 
 
      <h3 style="font-size: 15px; display:inline;">Pipeline : </h3>   \ 
 
      <h3 style="font-size: 20px; display:inline;"> '+obj.name+' </h3>   \ 
 
      <div id="status" style="display:inline; font-size:10px;"> red colored div </div>   \ 
 
     </div>                  \ 
 
     <div style="margin-bottom: 10px;">           \ 
 
      <h3 style="font-size: 15px; display:inline;">Status message : </h3>  \ 
 
      <h3 style="font-size: 20px; display:inline;"> '+obj.statusMessage+' </h3> \ 
 
     </div>                  \ 
 
     </div>' ; 
 
     
 
     return str; 
 
     } 
 
     
 
     
 
     function callmyFunction(){ 
 
     obj={ 
 
      "name": "abc", 
 
      "statusMessage" : "fdsffs" 
 
     }; 
 
     
 
     var str = myFunction(obj); 
 
     document.getElementById("demo").innerHTML=str; 
 
     } 
 
     
 
     //calling callmyFunction() on load 
 
     callmyFunction(); 
 
\t document.getElementById("status").style.color='black'; 
 
\t alert('Changing color to red'); 
 
     document.getElementById("status").style.color='red';

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <div id="demo"></div> 
 
    </body> 
 
    <!-- script tag goes here --> 
 
</html>

Quelle

2017-05-08 06:26:29

Der Code in der Frage war Pseudocode. Ich suche eine Möglichkeit, Variablen zu Inline-Styles hinzuzufügen. –

Sie haben nur Funktionsschlüsselwort übersprungen, um Ihren Code in Pseudocode zu ändern : D –

Können Sie bitte Ihren genauen Code schreiben, damit wir wissen, wo Sie mit dem Problem konfrontiert sind. –

Der Fehler, den Sie bekam bedeutet, dass Ihr Code document.getElementById("status") kehrt null (Kann nicht Eigenschaft 'Stil' von null lesen). Mit anderen Worten, die div mit der IDstatus existiert nicht im DOM zu dem Zeitpunkt, als Sie Ihre Funktion myFunction() aufrufen.

document.getElementById() sucht nach Elementen im DOM, nicht in einer zufälligen Javascript-Variable, die Sie str nennen würden. Wenn es nicht im DOM ist - in Ihrem HTML-Dokument - wird die Funktion es nicht finden.

Quelle

2017-05-09 03:24:59 gabriel

Wie Variablen für Stile in HTML verwenden

Antwort

Verwandte Themen