0

I need to done this in Javascript if its possible not with jquery... Here is explanation...

I have a several stylesheet links on page like this

<link rel="stylesheet" href="http://example.com/theme/themered/themered.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://example.com/basic/basic.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://example.com/default/style.css" type="text/css" media="all" />

and have select HTML tag with around 50 theme css options but will add only 2 here

<select>
<option value="http://example.com/theme/themeblue/themeblue.css">Theme Blue</option>
<option value="http://example.com/theme/themegreen/themegreen.css">Theme Green</option>
<option value="http://example.com/theme/themeorange/themeorange.css">Theme Orange</option>
</select>

and now.. I need from javascript, when somebody select, for example "Theme Blue" from select dropdown, to script find specific stylesheet, stylesheet with tagname link and with href it contains string "http://example.com/theme".

And its need to delete this url and replace it with one from selected dropdown, or maybe to replace only this part after "http://example.com/theme" for example if I select Blue theme... it will replace "themered/themered.css" with "themeblue/themeblue.css"

Thanks

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
Davor Popovic
  • 85
  • 2
  • 12
  • 1
    how do you do mapping between the css? also, what do you want to achieve? replaced css will not be applied just because you change the url in the page header – Lelio Faieta Sep 13 '18 at 11:30
  • do you want to change the href of ? if so you can select link with javascript selector and change .href attribute – Chris Li Sep 13 '18 at 11:30
  • @LelioFaieta `replaced css will not be applied just because you change the url in the page header` Not to be the "actually, ..." guy, but this is indeed exactly what happens for me –  Sep 13 '18 at 11:43
  • It looks to me that this have been answered before? https://stackoverflow.com/q/19844545/2808954. As a more trivial tip I'd also suggest to reduce your structure to something like "/theme/themered.css" or "/theme/themered/index.css" so that you can use a more simple value replacer – Tim Lind Sep 13 '18 at 11:56

2 Answers2

0

Even if you will be able to toggle the stylesheets on select option you have to reload the page for the changes to appear on the window.

Ayush Gupta
  • 114
  • 6
  • Not true, I tested this and it worked perfectly fine on FF, Chrome and IE11. Plus, this isn't an answer but a comment. If you can't comment yet, please earn rep until you can first, instead of breaking the rules. –  Sep 13 '18 at 11:45
0

Add an id to your <link> and <select>:

<link id="themesheet" rel="stylesheet" href="http://example.com/theme/themered/themered.css">

<select id="theme">
  <option value="blue">Theme Blue</option>
  <option value="green">Theme Green</option>
  <option value="orange">Theme Orange</option>
</select>

Now use this:

document.getElementById('theme').addEventListener("change", function (e) {
  var theme = e.target.value;
  var URL = `//example.com/theme/theme${theme}/theme${theme}.css`;
  document.getElementById('themesheet').href = URL;
});

I also shortened the involved code as much as possible; as long as all your themes follow that naming pattern, it will work fine.