我需要在 <style> 标签中放置一个变量答案

【问题标题】：I need to put a variabile in a <style> tag我需要在 <style> 标签中放置一个变量
【发布时间】：2016-09-25 14:48:27
【问题描述】：

假设有这个标签：

var variabile_colore="#efdcdc";

我需要在标签中添加一个变量（我认为是这样的，但它不起作用）：

<style>.foot {color: variabile_colore;} </style>

谁能帮帮我？

【问题讨论】：

使用 jquery 将 css 应用于任何元素，而不是这样的东西
看看You can create style element and insert it into DOM
Create a CSS rule / class with jQuery at runtime的可能重复
CSS（还）不完全支持这样的变量；你可能想研究像 SASS 这样的东西来实现你想要的。

标签： javascript jquery html css

【解决方案1】：

因为对我来说，您似乎尝试从 JavaScript 生成一个 css 类。看看这个answer。

这里适应你的情况（未经测试）：

var variabile_colore="#efdcdc";

$("<style type='text/css'> .foot{ color:" +  variabile_colore + 
               "; } </style>" ).appendTo("head");

【讨论】：

【解决方案2】：

这对你有帮助：

<body>
       <div class="foot" id="foot">Sample Text</div>
      <script>
          var variabile_colore="#efdcdc";
          var x = document.getElementById("foot");
          x.style.color = variabile_colore;   
       </script>
</body>

【讨论】：

【解决方案3】：

您可以使用createElement 创建动态style 标签并将其附加到DOM 中

$('#btn').on('click', function() {
  var sheet = document.createElement('style');
  var color = 'red';
  sheet.innerHTML = "p {color:" + color + "}";
  document.body.appendChild(sheet);
})

p {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Hello p tag</p>
<button id='btn'>Change</button>

【讨论】：

【解决方案4】：

我认为您需要强制应用颜色属性。

请尝试以下。

var variabile_colore = "#efdcdc !important";
$('.foot').css('color', variabile_colore);

【讨论】：

【解决方案5】：

我需要在标签中放置一个变量（我认为是这样的，但它不工作）：

不知道具体是什么意思你的意思是用js创建一个style标签并在里面声明？

如果是的话

var css= '.foot {color: "#efdcdc";}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet){
       style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);

如果样式表中已经存在样式

$("#elementId").addClass('foot');

如果要添加内联css

$('.foot').css('color', variabile_colore);

【讨论】：

【解决方案6】：

使用 jQuery:-

$('.foot').css('color', variabile_colore);

【讨论】：

【解决方案7】：

您可以通过在样式标签上创建 id 来使用 javascript 的 DOM 对象：

document.getelementbyId('styleid').style.color = "#efdcdc";

【讨论】：