根据js变量更改css答案

【问题标题】：change css based on js variable根据js变量更改css
【发布时间】：2022-01-11 09:35:32
【问题描述】：

我正在从我的后端传递一个名为editable 的变量，该变量包含true 或false 作为变量。一旦它被传递到前端，我就可以访问它。我想做这样的事情：

if ('<%= editable %>' == true) {
 //change the input tag (in css) to be able to be edited.
}

我在<style> 标签中有这段代码：

input {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;  
}

我该怎么做？

【问题讨论】：

让你的 CSS 使用一个类，该类包含你想要应用到你的输入标签的样式，当它应该是可编辑的时候。然后，当您使用模板引擎（看起来像 ejs？）呈现 HTML 时，使用 editable 标志来确定是否应该添加类。这样您就不需要让客户端 JS 参与添加类，而是可以在模板中呈现输入时添加它
@NickParsons 感谢您的 4 回复。那么一旦我使用editable 标志确定它，我将如何添加css？
请注意"true" == true 是假的。删除引号或使用JSON.parse。
@helplessdev 可编辑输入的 CSS 将包含在您创建的 CSS 类中，因此当输入元素获取您创建的 CSS 类时，它将获得应用到它的所有样式。您可以使用条件运算符添加类（以及样式）（例如：stackoverflow.com/q/41987284/5648954）

标签： javascript html css variables

【解决方案1】：

感谢大家的cmets。我已经想出了一个非常可行的解决方案，希望它可以在未来帮助到每个人。

function test () {
  if ('<%= editable %>' != 'yes') {
    var x = document.getElementsByTagName("input");
      for ( var counter = 0; counter < x.length; counter++){
         x.item(counter).readOnly = true
      }
   }
}

然后在body 标记中添加onload="test()"。

【讨论】：