gpt4 book ai didi

javascript - 如何在 HTML 中为样式使用变量

转载 作者:行者123 更新时间:2023-11-30 15:20:19 25 4
gpt4 key购买 nike

我有以下场景:

功能一:

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>

功能二:通过传递对象调用函数 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 的属性'style' 在我的函数 (:17:34)')

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

这里的变量是根据obj的属性动态决定的(obj作为参数传递)

如果有一种方法可以将变量绑定(bind)到返回字符串中的样式属性,那么问题就解决了

喜欢:

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

我不能使用 CSS 类,因为它用于电子邮件。而且我知道我可以将 CSS 用于任何其他情况。

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

最佳答案

<body> 中添加您的 JavaScript区域。当您运行该函数时,DOM 未找到 ID 为 status 的任何元素并返回为 null .如果您将脚本移动到正文内容中,它将起作用。看下面的 fiddle 。

Wrap JavaScript inside BODY

在上面的 fiddle 中,我将 JavaScript 加载类型选择为 No wrap - in <body>我可以看到颜色的变化。如果我将负载类型更改为 No wrap - in <head>然后我收到空错误。

关于javascript - 如何在 HTML 中为样式使用变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43840703/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com