Loading CSS Style Dynamically

Question

I have a style-sheet that is saved in this location:

/opt/lampp/htdocs/project/core/styles/Style.css

Now, what I need to do is load it using that full directory, because the files that are going to be using it are located here:

/opt/lampp/htdocs/project/client/

My goal is to create a completely dynamic site that updates correctly to numerous "Clients" based on their own personal information. So far I've got everything done, however I wanted to move the CSS to be loaded dynamically as-well so if I wanted to make any changes to the style-sheet they would be instantly noticed.. Here's where I'm running into a problem, I can't figure it out. I've followed the front page of google to a dozen of different methods using JavaScript, but none of them have worked and they are all from 2009-2010.. Perhaps someone would like to shed some light on my dark path?

var cssLink = $("<link rel='stylesheet' type='text/css' href='"PERSONAL_CSS.css"'>"); $("head").append(cssLink); Put it in a function and you're good to go. — display-name-is-missing
– display-name-is-missing, Commented May 28, 2014 at 14:53
What is the root of the web-server, /opt/lampp/htdocs/, or are you using virtual hosts for your clients? — jeroen
– jeroen, Commented May 28, 2014 at 14:55

Ariel · Accepted Answer · 2014-05-28 14:58:59Z

1

this works for me:

document.write('<link rel="stylesheet" type="text/css" href="/opt/lampp/htdocs/project/core/styles/Style.css" media="screen" />');

answered May 28, 2014 at 14:58

Ariel

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christian Tucker Over a year ago

Notice: Use of undefined constant document - assumed 'document' in /opt/lampp/htdocs/eDash/index.php on line 2 Fatal error: Call to undefined function write() in /opt/lampp/htdocs/eDash/index.php on line 2

Flatlin3 Over a year ago

You have to use this code snipped in the frontend it's JavaScript not PHP

jeroen · Accepted Answer · 2014-05-28 17:52:40Z

0

I don't see any reason to use javascript unless a loaded page needs to refresh automatically when the style-sheet is changed.

If you just need it to reload automatically on the next page-load, you can use something like:

<link rel="stylesheet" type="text/css" href="/project/core/styles/Style.css?v=<?php echo time(); ?>">

Using an absolute path makes sure it will work for any client / file in any folder.

I have added the timestamp to the css file so that it will not be cached but you can also set up the server to disable caching for specific files.

answered May 28, 2014 at 17:52

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Collectives™ on Stack Overflow

Loading CSS Style Dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related