如何在 HTML 中为样式使用变量答案

【问题标题】：How to use variables for styles in HTML如何在 HTML 中为样式使用变量
【发布时间】：2017-05-08 05:57:56
【问题描述】：

我有以下场景：

功能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 = "demo" 的 div

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

现在我想从 myFuncton() 动态更改 id = "status" 的 div 的颜色，这是返回的 HTML 字符串的一部分。像这样的东西：（但这会引发错误'无法读取null的属性'样式' 在 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 用于任何其他情况。

而且上面的代码是伪代码。不要寻找语法错误。

【问题讨论】：

如果你只想给#status 上色（你有合适的选择器），为什么不用css 来代替呢？
不建议对电子邮件使用 CSS 类。一切都必须是内联 CSS
你应该在问题中提到这一点。
对不起，我错过了 :( 有人也对这个问题投了反对票

标签： javascript html css

【解决方案1】：

在<body>area 中添加您的JavaScript。当您运行该函数时，DOM 没有找到任何 id 为 status 的元素并返回为 null。如果您将脚本移动到正文内容中，它将起作用。看看下面的小提琴。

Wrap JavaScript inside BODY

在上面的小提琴中，我选择了 JavaScript 加载类型为No wrap - in <body>，我可以看到颜色的变化。如果我将加载类型更改为No wrap - in <head>，则会收到空错误。

【讨论】：

【解决方案2】：

你得到的错误（Cannot read property 'style' of null）意味着你的代码document.getElementById("status") 正在返回null。换句话说，在您调用函数myFunction() 时，DOM 中不存在具有 id status 的 div。

document.getElementById() 在 DOM 中查找元素，而不是在您称为 str 的随机 Javascript 变量中。如果它不在 DOM 中 - 在您的 html 文档中 - 该函数将找不到它。

【讨论】：

【解决方案3】：

为什么不使用 CSS 类？这就是他们的目的。您在样式表中定义样式。然后使用 javascipt (document.getElementById("status").classList.add("js-red-color")) 添加相关类。

我通常在我的 css 类前面加上 js-，所以我知道它们是动态添加的。

【讨论】：

【解决方案4】：

您在函数名称之前错过了 function 关键字。请检查下面的代码sn-p。

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();
	  document.getElementById("status").style.color='black';
	  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>

【讨论】：

问题中的代码是伪代码。我正在寻找一种将变量添加到内联样式的方法。
你已经跳过了函数关键字来将你的代码更改为伪代码：D
能否请您写下您的确切代码，以便我们知道您面临的问题。