有没有办法在HTML的CSS部分中访问JavaScript String变量？

Question

有没有办法在HTML的CSS部分中访问JavaScript String变量？

例如，我有一个前缀，该前缀始终出现在所有图像URL中。 为代码维护，仅设置带有前缀的公共变量是适当的。 我正在寻找这样的东西：

<script type="text/javascript">
    var dropBoxPrefix = 'https://dl.dropboxusercontent.com/s/XXXX';
</script>

<style>
    html, body {
        background-image: url(dropBoxPrefix + '/bg.gif');
    }
    .re {
        background-image: url(dropBoxPrefix + '/header-bottom-left.png');
    }
    ul li {
        background-image: url(dropBoxPrefix + '/ok.png');
    }
    .networksTtl {
        background-image: url(dropBoxPrefix + '/Maps.png');
    }
</style>

Answer 1

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

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

http://www.w3schools.com/jsref/prop_style_backgroundimage.asp

Answer 2

除了营业额之外，别无选择，可以使用javascript在您的头部添加样式，如下所示（jQuery示例）：

var color1 = 'green';
$('<style>.yourclass { color:' + color1  +'}</style>').appendTo('head');

在纯js中：

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

Answer 3

如果您决定采用LESS方式，（并且可以使用simpLESS编译器：例如，以文件名background.less编写代码，然后将其拖放到simpleLess编译器中，然后将其转换为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");
}