有没有办法访问HTML的CSS部分中的JavaScript字符串变量？

有没有办法访问HTML的CSS部分中的JavaScript字符串变量

例如，我有一个前缀，它一直出现在所有图像URL中。只有设置一个带有前缀的公共变量，才能进行代码维护。我在找这样的东西：

var dropBoxPrefix=https://dl.dropboxusercontent.com/s/XXXX';
html，正文{
背景图片：url（dropBoxPrefix+'/bg.gif'）；
}
.re{
背景图像：url（dropBoxPrefix+'/标题左下角.png'）；
}
ulli{
背景图片：url（dropBoxPrefix+'/ok.png'）；
}
.networksTtl{
背景图片：url（dropBoxPrefix+'/Maps.png'）；
}

---

不，这在您的方式中是不可能的，但是您可以在js脚本执行期间设置此样式属性

document.body.style.backgroundImage = "url('https://dl.dropboxusercontent.com/s/XXXX/bg.gif')";

---

没有办法，但可以用javascript在头部添加样式，如下所示（jQuery示例）：

---

如果您决定采用较少的方式（并且可以使用编译器：示例在filename background.LESS中编写代码），则将其拖放到Simpless编译器中，并将转换为background.css
更少的代码：

   //variables
@dropBoxPrefix : 'https://dl.dropboxusercontent.com/s/XXXX/';
@imageHTML : "bg.gif";
@imageRe : "header-bottom-left.png";
@imageULLI : "ok.png";
@imageNetworksTtl : "Maps.png";

//mixin
.backgroundImage(@image){
    @bi : "@{dropBoxPrefix}@{image}";
    background-image: url(@bi);
}

//styles
html, body{
    .backgroundImage(@imageHTML);
}
.re{
    .backgroundImage(@imageRe);
}
 ul li{
    .backgroundImage(@imageULLI);
}
.networksTtl{
    .backgroundImage(@imageNetworksTtl);
}

您将收到已编译的CSS：

html,
body {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/bg.gif");
}
.re {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/header-bottom-left.png");
}
ul li {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/ok.png");
}
.networksTtl {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/Maps.png");
}

---

不，但是你可以把URL的最后一部分作为背景图像URL，然后使用Javascript在页面加载时修复它。你可以使用服务器端语言（如PHP）来构建动态样式。或者你可以使用CSS的预处理器LESS或SASS，或者使用LESS或SASS（通过JS或PHP）CSS中的变量。与使用服务器端脚本创建样式表相比，我强烈建议使用LESS或SASS。您会喜欢这些CSS预处理器，它们会在CSS的许多领域帮助您。如果这是您问题的答案，那么这不是问题的答案“有没有一种方法可以访问HTML的CSS部分中的JavaScript字符串变量？”…也许可以改变这个问题？

var color1 = 'green';
var css = '.yourclass { color:' + color1  +'}',
    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);

   //variables
@dropBoxPrefix : 'https://dl.dropboxusercontent.com/s/XXXX/';
@imageHTML : "bg.gif";
@imageRe : "header-bottom-left.png";
@imageULLI : "ok.png";
@imageNetworksTtl : "Maps.png";

//mixin
.backgroundImage(@image){
    @bi : "@{dropBoxPrefix}@{image}";
    background-image: url(@bi);
}

//styles
html, body{
    .backgroundImage(@imageHTML);
}
.re{
    .backgroundImage(@imageRe);
}
 ul li{
    .backgroundImage(@imageULLI);
}
.networksTtl{
    .backgroundImage(@imageNetworksTtl);
}

html,
body {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/bg.gif");
}
.re {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/header-bottom-left.png");
}
ul li {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/ok.png");
}
.networksTtl {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/Maps.png");
}