0
119
ViewsHow to dynamically change themes after clicking a drop down menu of themes with vanilla javascript
I'm using bootstrap for the interface of the website I'm developing. I am also planning to integrate the bootswatch themes to my site. I have created a dropdown menu containing the different themes of bootswatch. My problem is how can I switch themes when I click one of the themes in the dropdown menu?
Note that I want to do this with raw JavaScript without any special framework
·
Juan Pablo Isaza
1 answers
Answer question0
Set your link with an id:
<link rel="stylesheet" id="dynamicCSS" type="text/css" href="mystyle1.css" />
Apply an onchange event to your select list:
<select id="myDropdownList" onchange="swapCSS()">
<option>mystyle1.css</option>
<option>mystyle2.css</option>
<option>mystyle3.css</option>
</select>
Add your Javascript function:
const swapCSS = function()
{
let selection = document.getElementById("myDropdownList").selectedOptions[0];
document.getElementById("dynamicCSS").href = selection.value;
}
·
Juan Pablo Isaza
Report
Answer question