1

尝试更新自定义 CSS href，第一次可以正常工作，但在后续更新中，页面不会发生任何更改。我可以在 Chrome 调试器中看到 href 更新，所以事件正在触发，LESS 没有抛出任何错误，但颜色不会第二次更新。

这是一些代码（为了可读性而连接；注意我使用的是 VS 2010，MVC4，因此是 less.css扩展名）：

<link href="/Content/themes/customizable_default.less.css" id="CustomCSS" rel="stylesheet/less" type="text/css">

        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_default.less.css">Default CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_green.less.css">Green CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_gray.less.css">Gray CSS</a>
        <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_blue.less.css">Blue CSS</a>

        <div class="ThemeBox">
            <div class="ThemeCompartment1">
                <h2>This is the title.</h2>
            </div>
            <div class="ThemeCompartment2">
                <p>A bunch of copy goes here.</p>
            </div>
        </div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {

        // choosing a template
        $('.ToggleButton').click(function (e) {
            $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') });
            localStorage.clear();
            less.refresh();
        });
    });

</script>

请注意，样式表链接位于标题中，因此所有标记在语义上都是正确的（当然，CssUrl 属性除外）。如果我更改链接 href，然后再返回，则不会重绘新值。

例子：

单击“绿色 CSS”按钮 -> 链接 href="/Content/themes/customizable_green.less.css" -> ThemeBox 变为绿色。

单击“红色 CSS”按钮 -> 链接 href="/Content/themes/customizable_red.less.css" -> ThemeBox 变为红色。

单击“绿色 CSS”按钮 -> 链接 href="/Content/themes/customizable_green.less.css" -> ThemeBox 保持红色。

我怀疑这与 .less 缓存有关，这就是为什么我添加了localStorage.clear()调用，但无论是还是less.refresh(true)都没有解决这个问题。

有什么想法吗？

4

1 回答 1

4

这是由于 LESS 似乎工作的方式。它解析 less 文件，然后将属性添加到styleDOM。在实践中，这些似乎遵循以下格式

<style type='text/css' id='less:<<NAME OF YOUR LESS FILE>>'>
   /*your parsed content*/
</style>

您没有看到它返回的原因是因为 LESS 正在解析您的内容，找到现有的样式块，而不是添加它。在末尾添加了后续样式块，head因此您可以获得样式的“最后一个”版本。

将您的功能更改为以下内容：

    $('.ToggleButton').click(function (e) {
        $('style[id^="less:"]').remove();
        $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') });
    less.refresh();
    });

你应该看到它以你想要的方式运行。

于 2012-05-02T23:04:57.483 回答