动态更改CSS href链接

Question

<link href="CSS/make.css" rel="stylesheet" />

This an external css file for a page named "Default.aspx" which is located in "Root/Pages" directory.

so In "Root/Pages" we will have these:

Default.aspx
CSS/make.css

It will work fine if I launch Default.aspx from current location, But user can change the directory of Default.aspx from main page. Then in Code-Behind I will copy all of Pages contents into another directory.

Just think I will copy Default.aspx and CSS folder from Root/Pages to Root/Backup and try to launch Default.aspx from new location. In this situation it can not read and load external css file!

How can I change css href link dynamically from its container page's location?

For example changing href="CSS/make.css" to href="BackUp/CSS/make.css" .

After some research I found that I should use Global and URL Routing, but I did not get any working result.

Answer 1

If you put the css file in the root directory then refer to it using:

<link href="/make.css" rel="stylesheet" />

It should now work even when you move your Default.aspx to another location. The downside to this is that it can clutter your root directory if you plan to use it for multiple different pages with different CSS files.

Let me know if it works and if I am understanding your question right.

Answer 2

function DynamicURL()
    {  
    var URL='CSS/make.css';
    var BackUp ='BackUp/';
    if (Your condition when it changes directory)
    URL = Backup + URL;

    document.getElementById('Field').href= URL;
    }

Don't forget to set ID to your link href field.