I am building a website with CodeIgniter, I have various resources that I load with the base_url helper function like this

<link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="style_color"/>

which produces (i.e. www.mysite.com)

<link rel="stylesheet" type="text/css" href="http://www.mysite.com/assets/css/themes/default.css" id="style_color"/>

I can then swap this resource with another in javascript like this

$('#style_color').attr("href", "assets/css/themes/" + color_ + ".css");

what happens is that it will try to load the resource without using the absolute path generated by php, so my solution was adding a dummy tag in every page with php like this

<div id="base_url" class="'.base_url().'"></div>

I then modified the javascript line to

$('#style_color').attr("href", $('#base_url').attr("class") + "assets/css/themes/" + color_ + ".css");

it does work but it doesn't look elegant at all, so, I would appreciate any help on how to maybe generate this base url from within javascript or any other solution, thanks :)

I preferred a Javascript only solution and since I am using CodeIgniter, a document.base_url variable with the segments of the url from the protocol to the index.php seemed handy

document.base_url = base_url('index.php');

with the function base_url() being

function base_url(segment){
   // get the segments
   pathArray = window.location.pathname.split( '/' );
   // find where the segment is located
   indexOfSegment = pathArray.indexOf(segment);
   // make base_url be the origin plus the path to the segment
   return window.location.origin + pathArray.slice(0,indexOfSegment).join('/') + '/';
}