如何在CSS内使用全局JavaScript变量

Question

我正在使用ASP.NET MVC应用程序。我需要知道如何使用HTML代码中的全局JavaScript变量。我知道全球变量不是解决问题的理想解决方案，而是我的解决方案，我需要它们。

我知道他们的声明。这是我想如何使用它们的示例。我想使用在输入处填写的全局JS变量。

var title;
function foo(b) {
  title = b;
};

<input type="text" value=title readonly>

任何帮助将不胜感激。谢谢。

Answer 1

var title;
function foo(b) {
  document.getElementById("title").value = b;
};
foo("irin")

<input type="text" id="title" readonly>

Answer 2

使用任何style对象的setProperty对象的CC_1函数

"use strict";
// Note the double quotation '" and "'
// I won't work without, if you want to use the value
// with CSS content rule
const title = '"My title"';
document.getElementById('title').style.setProperty('--title', title);

div {
  padding: 5px;
  border: 1px solid gold;
}
div:before {
  content: var(--title, 'not set');
}

<div id="title"></div>

在上面的示例中，我使用了[CSS custom Property][1]，但是您可以无需

"use strict";
const title = '"My title"';
const style = document.createElement('style');
style.textContent = `#title:before {
  content: ${title};
}`;
document.head.append(style);

div {
  padding: 5px;
  border: 1px solid gold;
}

<div id="title"></div>