Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag.
In order to test this functionality, I am working on a simple testcase while utilizing Less for CSS. Within my project, I have 2 .less files ('test.less' & 'testTwo.less'). Below is the code snippet:
$(function() {
$('#changeButton').click(function() {
$('#style').attr('href', '../testfiles/testTwo.less');
console.log($('#style').attr('href'));
})
})During testing, I verify if the href value actually changes, which it does successfully. However, the styling of the page remains unaffected.
<!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>I understand that there might be something crucial missing from my approach, possibly related to CSS rendering. Any guidance or assistance would be greatly appreciated. Thank you!