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

Question

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

例如，我有一个在所有图像 URL 中不断出现的前缀。为了代码维护，设置一个带有前缀的公共(public)变量才是合适的。我正在寻找这样的东西:

<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

如果您决定采用 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");
}