在 CSS 中访问 JavaScript 变量答案

【问题标题】：Access JavaScript variable in CSS在 CSS 中访问 JavaScript 变量
【发布时间】：2015-09-08 23:57:00
【问题描述】：

以下是供参考的代码。变量“imgpath”的值在加载时更改。我需要为“icon1”类的背景图像分配这个新值。我知道这可以使用 JavaScript/jQuery 来完成，但我需要一些方法来更新 CSS 本身中的这个值。是否可以使用 Sass/Less 或任何其他方式？

<html>

<head>
    <style>
    .icon1 {
        background: transparent url("imagepath1/icon1.png") no-repeat center center;
    </style>
</head>

<body>
    <a class="icon1"></a>
    <script>
    var imgpath = "imagepath1";
    if (setnewpath)
        imgpath = "imagepath2";
    </script>
</body>

</html>

感谢您的帮助！

【问题讨论】：

感谢您的回复，但我知道如何使用 javascript/jquery。但我需要知道是否可以使用 sass/less？
无法用css或sass访问javascript变量，可以考虑运行nodeJS。

标签： javascript jquery css sass less

【解决方案1】：

您无法在CSS 中访问Javascript。

您可以使用css() 使用jQuery 设置css 属性。

$('.icon1').css('background-image', imgpath + '/icon1.png');

设置所有属性

$('.icon1').css('background', 'transparent url("' + imgpath + '/icon1.png") no-repeat center center');

css():

为一组匹配的元素设置一个或多个 CSS 属性。

【讨论】：

【解决方案2】：

我从W3cschool得到参考

document.getElementsByClassName('icon1').background = "transparent url(" +imgpath + "/icon1.png") no-repeat center center";

【讨论】：

【解决方案3】：

您不能从 css 访问 javascript，反之亦然。请参阅此代码：

document.getElementByClassName("icon").style.backgroundImage = "url('+imgpath + '/icon1.png')";

我更喜欢这个解决方案，而不是 Tushar 的，因为它可以独立运行。这么小的任务不需要 jQuery。

【讨论】：

【解决方案4】：

使用模型变量作为剃须刀，我认为可以接受：

<html>
  <head>
    <style>
    .icon1 { background:transparent url(@Model.imgpath ) no-repeat center center;
    </style>
  </head>
  <body>
    <a class="icon1"></a>
    <script>
      var imgpath = "imagepath1";
      if(setnewpath)
        imgpath = "imagepath2";
    </script>
  </body>
</html>

【讨论】：

你能提供更多细节吗？
我假设你使用了asp.net mvc，你应该在模型中定义一个字符串类型变量（ieimagpath），然后你可以在控制器中获取值（或在控制器中调用服务），所以你可以使用剃刀语法“@Model.imagpath”让它工作。
不，没有 .net 涉及。这只是客户端
有服务器端处理吗？如果是纯js，可以在less中为dom定义一个类，用js修改。
你能举个例子吗？

【解决方案5】：

幸运的是，样式表和规则实际上是暴露在 DOM 中的。

一种简单的方法是获取对元素的引用并将其 textContent 替换为全新的 CSS 源代码，内置于 JavaScript。不过，我不完全确定这是否真的有效。取决于浏览器是否会费心将新内容重新解析为新 CSS。

然而，应该工作的稍微复杂一点的方法是实际使用 StyleSheets 对象模型。

您可以通过var sheet = document.styleSheets[0];获取样式表

然后用var rule = sheet.cssRules[0];获取规则

然后您可以替换规则文本：rule.cssText = '.icon1 { background:transparent url("'+imagepath+'") no-repeat center center;';

遗憾的是，API 并没有比一次性替换整个规则文本更细。

如果您愿意，您还可以删除规则并添加新规则，而不是就地更改文本。见https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

【讨论】：

看起来很有趣。但正如你所说，可能存在浏览器限制。