Fatal编程技术网

访问CSS中的JavaScript变量

javascript jquery css sass less

访问CSS中的JavaScript变量,javascript,jquery,css,sass,less,Javascript,Jquery,Css,Sass,Less,以下是参考代码。变量“imgpath”的值在加载时更改。我需要为类“icon1”的背景图像指定这个新值。 我知道这可以使用JavaScript/jQuery来完成，但我需要一些方法在CSS本身中更新这个值。 可以使用Sass/Less或任何其他方式吗 <html> <head> <style> .icon1 { background: transparent url("imagepath1/icon1.png") no-rep

以下是参考代码。变量“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>


.icon1{
背景：透明url（“imagepath1/icon1.png”）无重复中心；
var imgpath=“imagepath1”；
如果（设置新路径）
imgpath=“imagepath2”；
感谢您的帮助！

您无法在
CSS
中访问
Javascript

您可以使用jQuery设置
css
属性

$('.icon1').css('background-image', imgpath + '/icon1.png');
设置所有属性

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

css（）
：

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

我从你那里得到推荐信

您无法从css访问javascript，反之亦然。请参阅以下代码：

document.getElementByClassName("icon").style.backgroundImage = "url('+imgpath + '/icon1.png')";
我更喜欢这个解决方案，而不是Tushar的，就像它可以自己工作一样。这么小的任务不需要jQuery。

使用模型变量作为razor，我认为它是可以接受的：

<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>


.icon1{背景：透明url（@Model.imgpath）无重复中心；
var imgpath=“imagepath1”；
如果（设置新路径）
imgpath=“imagepath2”；
幸运的是，样式表和规则实际上是向DOM公开的

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

然而，一种稍微复杂一点的方法应该是实际使用样式表对象模型

您可以使用
var sheet=document.styleSheets[0]；

然后使用
var rule=sheet.cssRules[0]；

然后可以替换规则文本：
rule.cssText='.icon1{background:transparent url（“+imagepath+”））无重复中心；'；

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

你也可以删除规则，添加新的，而不是改变文本，如果你愿意的话，请参阅

谢谢你的回复，但是我知道如何使用JavaScript /jQuery来做它。但是我需要知道是否可以使用SASS/Sub？用CSS或SASS访问JavaScript变量是不可能的，你可以考虑运行NoDEJs。提供更多详细信息？我假设您使用asp.net mvc，您应该在模型中定义一个字符串类型变量（即imagpath），然后您可以在控制器中获取值（或在控制器中调用服务），因此您可以使用razor语法“@model.imagpath”让它工作。不，没有.net参与。这只是客户端。是否有任何服务器端来处理它？如果是纯js，您可以用更少的时间为dom定义一个类，使用js来修改。您能提供任何示例吗？看起来很有趣。但正如您所说，可能存在浏览器限制。 
<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>