在 CSS 中访问 JavaScript 变量

Posted 2023-03-06

技术标签:

【中文标题】在 CSS 中访问 JavaScript 变量【英文标题】：Access JavaScript variable in CSS 【发布时间】：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。 【参考方案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

【讨论】：

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

以上是关于在 CSS 中访问 JavaScript 变量的主要内容，如果未能解决你的问题，请参考以下文章

通过 JavaScript 访问 CSS 自定义属性（又名 CSS 变量）