如何让body取一个等同于style ="background-color:returnBlue()"的样式属性,其中returnBlue()返回"blue"？

Question

<html>
  <body style="background-color: returnBlue()">
    <em>Boy, I sure do wish I existed on something that was blue.</em>
  </body>
</html>

风格不会使身体变蓝

function returnBlue()
{
   return 'blue';
}

如何使returnBlue()函数运行并返回属性？谢谢!

Answer 1

总之,你不能.style属性被解析为CSS,您尝试执行的是JavaScript函数.没有办法从CSS调用JS.

您可以做的是获取脚本中元素的引用并手动更改它.

var body = document.body;
body.style.backgroundColor = returnBlue();

但是,与使用JavaScript手动设置节点样式相比,您可能更好地在CSS类中定义样式.

/* style.css */
.blue-bg {
  background-color: blue;
}

然后在<body>标签上使用该类.

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="blue-bg"></body>

如果你真的想以编程方式派生你的样式,那么你最好看看像SCSS这样支持函数的语言.