Question

我有以下情况：

功能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用于任何其他案例。

以上代码是伪代码。不要寻找语法错误。

Answer 1

您收到的错误（无法读取属性'样式'为null ）表示您的代码document.getElementById("status")正在返回null。换句话说，在您调用函数status时，DOM中不存在带有 id myFunction()的 div 。

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

Answer 2

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

Wrap JavaScript inside BODY

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

Answer 3

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

我通常使用js-为我的css类添加前缀，因此我知道它们是动态添加的。

Answer 4

您在功能名称前错过了功能关键字。请查看下面的代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

如何在HTML中使用样式的变量

4 个答案: