如何使用樣式變量HTML

功能1：

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

例子：

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

功能2：電話函數1通過傳遞對象;

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

我的HTML有ID）一個div = 「演示」

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

現在我要動態地改變使用id =從myFuncton（「狀態」一格的顏色，這是一部分返回的HTML字符串。像這樣的東西：（但是，這將引發錯誤「無法讀取屬性‘風格’在myFunction的空的（17：34）」）

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

這裏變量決定基於動態obj的屬性（obj是通過作爲參數）

如果沒有綁定變量樣式屬性的字符串，則返回的問題將得到解決

喜歡的方式：

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

我無法使用CSS類，因爲它用於電子郵件。而且我知道我可以在任何其他情況下使用CSS。

而上面的代碼是僞代碼。不要查找syntac錯誤。

來源

2017-05-08 Darshan D

如果你只想爲'＃status'賦予顏色（你有一個合適的選擇器），爲什麼不用css呢？ –

建議不要將CSS類用於電子郵件。一切都必須內聯CSS –

你應該在問題中提到這一點。 –

在<body>區域內加入JavaScript。當您運行該函數時，DOM未找到任何元素編號爲status並返回爲null。如果您將腳本移動到正文內容中，它將起作用。看看下面的小提琴。

Wrap JavaScript inside BODY

在上述小提琴，我所選擇的JavaScript的負載類型爲No wrap - in <body>，我可以能夠看到的顏色變化。如果我將負載類型更改爲No wrap - in <head>，那麼我得到空錯誤。

來源

2017-05-09 03:45:13

爲什麼不使用CSS類？這是他們的目的。你在你的樣式表中定義你的樣式。然後使用javascipt添加相關類（document.getElementById("status").classList.add("js-red-color")）。

我通常在我的css類前添加js-，所以我知道它們是動態添加的。

來源

2017-05-08 06:04:03 gabriel

您錯過了函數函數名稱前的關鍵字。請檢查下面的代碼片段。

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>

來源

2017-05-08 06:26:29

問題中的代碼是僞代碼，我正在尋找一種方法來爲內聯樣式添加變量 –

你已經跳過了只是函數關鍵字來將你的代碼改成僞代碼：D –

你能否寫下你的確切代碼，以便我們知道你面臨的問題。 –

你得到了錯誤（無法讀取空的特性 '風格'）意味着你的代碼document.getElementById("status")將返回null。換句話說，當您調用函數myFunction()時，div與IDstatus不存在於DOM中。

document.getElementById()尋找DOM中的元素，而不是隨機的Javascript變量，您可以調用str。如果它不在DOM中 - 在你的html文檔中 - 該函數將不會找到它。

來源

2017-05-09 03:24:59 gabriel

如何使用樣式變量HTML

回答

相關問題