Add JS and CSS files on IF/ELSE in html

Question

Here is situation

in Dev Environemt , I have to add css and js file like below

<script src="../../js/file.js">
<link rel="stylesheet" type="text/css" href="../../css/file.css">

in Production Environment , I have to add same css and js file like below with the change in src attribute

<script src="js/file.js">
<link rel="stylesheet" type="text/css" href="css/file.css">

Any solution to do it dynamically instead of manually

Thanks

see https://stackoverflow.com/questions/4847313/dynamically-add-css-to-page-via-javascript — Devsi Odedra, Jul 30 '19 at 12:43
it's possible to do client-side, but IMHO it should be handled on server-side instead — Adam Kosmala, Jul 30 '19 at 12:44

Brhaka · Answer 1 · 2019-07-30T13:00:25.973

0

You can use PHP for that.

On the import / include, use <?php echo dirname(dirname($_SERVER['PHP_SELF'])); ?>

E.G:

<link rel="stylesheet" type="text/css" href="<?php echo dirname(dirname($_SERVER['PHP_SELF'])); ?>/css/style.css">

dirname($_SERVER['PHP_SELF']) will return the path to the current file's directory.

dirname(dirname($_SERVER['PHP_SELF'])); will return the path before the current file's directory. You can read more about that here, and about $_SERVER['PHP_SELF'] here.

About using PHP, click here.

edited Jul 30 '19 at 13:00

answered Jul 30 '19 at 12:55

Brhaka

1,622
3
11
31

You can use `__dirname` instead. Read [here](https://nodejs.org/docs/latest/api/globals.html) and [here](https://www.hostingadvice.com/how-to/nodejs__dirname/). – Brhaka Jul 30 '19 at 13:14

score 0 · Answer 2 · answered Jul 30 '19 at 12:55

You can achieve that creating the style and script tag on the fly according to an IF.

    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    if (production)
        link.setAttribute('href', 'css/my.css');
    else
        link.setAttribute('href', 'css/dev_my.css');
    document.getElementsByTagName('head')[0].appendChild(link);

Add JS and CSS files on IF/ELSE in html

2 Answers2