Adding css href link Dynamically in header

Question

I want to add the css href link dynamically in header after checking specific url in window. for example

when i open

red.abc.com

a css href link dynamically load/add in header

<link href="red.css" rel="stylesheet">

and with

abc.com

this css link should be disabled or removed.

Are you asking how to add a stylesheet in the `head` dynamically or changing the path of an existing stylesheet reference dynamically? — Cue, Jan 16 '19 at 14:54
i am asking to add a extra stylesheet (color css) dynamically in head, not changing the path of an existing stylesheet. — Ikt, Jan 16 '19 at 15:02

score 0 · Answer 1 · answered Jan 16 '19 at 14:54

You can do it with php, easily. Get your url, than explode it and take part you need. When you get that part add it to varaible and put it in a link

$url = $_SERVER['REQUEST_URI'];
$urlExploded = explode($url, '.');
$link = $urlExploded[1];

<link href="/css/<?php echo $link ?>.css">

My experience with JS messing with those tags is not so good, so maybe some of the JS guys could help you.

score 0 · Accepted Answer · answered Jan 16 '19 at 15:04

0

console.log(window.location.origin)

Add css file in header

U can just add your condition:

if(window.location.origin == "example.com")
 // condition

answered Jan 16 '19 at 15:04

Aziz.G

3,599
2
17
35

score 0 · Answer 3 · answered Jan 16 '19 at 15:07

This can help you add link like you expected into the page.

if (window.location.origin === "red.abc.com") {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = window.location.origin + 'red.css';
  document.head.appendChild(link);
}

Adding css href link Dynamically in header

3 Answers3