0

I'm trying to call a function on my XAMPP server that dynamically changes the current stylesheet of an HTML document. This is what I'm currently doing:

document.getElementById("color-scheme").href = "../colors.css";

The colors.css is obviously one folder above the page that is using this code, hence the "../". Now my problem is that there are dozens of pages in different folder levels that all need to access this colors.css to set the color-scheme. For example:

  • index.php (same folder)
  • news/index.php (one folder in)
  • news/january/index.php (two folders in) ... and so on.

This means that every page that isn't exactly one folder above colors.css doesn't work as it can't find the file at "../colors.css", as the server seems to go back beyond the root to find the file.

I feel like manually adding "../" according to the folder's level would be very bad coding, so I don't want to do this:

function LoadColorScheme(var level) {
   var path = "";
   for (var i = 0; i < level; i++) 
      path += "../";
   path += "colors.css";
 }

Is there a better way to do this?

Zelos
  • 107
  • 6
  • 2
    Use an absolute path in the CSS URL. – Barmar Dec 28 '21 at 02:03
  • 1
    I think you can define absolute path for root. This should help : https://stackoverflow.com/questions/11604445/php-absolute-path-to-root – PR7 Dec 28 '21 at 02:05

1 Answers1

0

using separate files for css/javascript is not really scalable when your apps grow, you can use some bundler tools like webpack, rollup... to bundle all assets into a single entry file. The tools manage dependencies of the entry files autonomously, hence you would not need the manual import of each asset.

Thang Le
  • 27
  • 5