Question

好的，所以我对编程很新，我正在寻找以下解决方案：我试图动态更新我的页面的CSS，使用JQuery来更改＆＃39; HREF＆＃39;链接标记中的值。

我使用简单的测试用例试图让它正常工作。我正在使用Less for CSS。我有2个无文件（＆＃39; test.less＆＃39;＆amp;＆＃39; testTwo.less＆＃39;）。这是我的代码：

＆＃13;

$(function() {

	$('#changeButton').click(function() {
		$('#style').attr('href', '../testfiles/testTwo.less');
		console.log($('#style').attr('href'));
	})

})

＆＃13;

我记录href值以查看它是否实际发生变化。只有页面的样式不会改变。

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet/less" type="text/less" href="../testfiles/test.less" id="style">
    <script type="text/javascript" src="../jquery/jquery.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>

<body>
    <div id="changeButton">click me</div>

    <script src="../bower_components/less/dist/less.js"></script>
</body>

</html>

我在这里肯定遗漏了一些东西，我想知道css渲染还没有。欢迎任何帮助，谢谢！：）

Answer 1

您需要将代码更新为以下

$(function() {

    $('#changeButton').click(function() {
        $('#style').attr('href', '../testfiles/testTwo.less');
        console.log($('#style').attr('href'));
        $('style[id^="less:"]').remove(); // you need to remove the less
        less.refresh(); // refresh the files
    })

})

备注

最好用html中的css代替较少（性能影响）。使用预编译器让html引用css。

Less编译器不会自动编译动态添加的文件。您需要强制使用较少的编译器来刷新样式。

由于LESS的工作方式，您需要删除较少的内容。它解析less文件，然后将一个style属性添加到DOM，其id属性为id='less:<<NAME OF YOUR LESS FILE>>'

Answer 2

每当我们使用less.js时，应该在此之前加载所有较少的文件，以便它可以在页面加载期间将较少的文件编译为css。由于您要动态添加较少的文件，因此无法编译。

href更改<link />标记后css不更新

2 个答案: