CSS样式表未添加

Question

I load any web page. Then open firebug console and run the below javascript, which creates a link element in the head of the page. the code is below.

    var s = document.createElement('link');
    s.setAttribute('href', 'file:///home/simha/.public_html/new1.css');
    s.setAttribute('rel', 'stylesheet');
    s.setAttribute('type', 'text/css');
    document.getElementsByTagName('head')[0].appendChild(s);
    alert('Stylesheet injected!');

the content of the file:///home/simha/.public_html/new1.css

body { background-color: #0000ee !important; }

I run the code in the firebug console and the following appears in the head of the html

<link type="text/css" rel="stylesheet" href="file:///home/simha/.public_html/new1.css">

But there no change in the background color (change to blue) of the body.

I checked the css rule independently from editing the css in firebug, the background color changes to blue.

I have apache web server installed. So i also tried instead of "file:///home/simha/.public_html/new1.css" to "localhost/~simha/new1.css" still it does not work.

I am using firefox browser.

Answer 1

这是因为出于安全原因，仅当文档也已从本地URI加载时，才可以从本地URI方案（例如file: ：）加载外部资源。

Answer 2

尝试这个，

 s.setAttribute('href', 'new1.css');

Answer 3

Your stylesheet named new1.css needs to be referenced in relation to the server's document root.

So you're using Apache, which means you setup the apache2.conf (or httpd.conf, etc) as well as the site conf file(s). The path you used in this config for DocumentRoot will be the reference point. From there you simply put /path/to/new1.css .

So in your case,

file:///home/simha/.public_html/new1.css

will translate to

/new1.css

So your final code will be

<link type="text/css" rel="stylesheet" href="/new1.css">

When you put file:/// prefixing an address, it's not using the server filesystem to load the file, it's using the client/user. This is due to the blank string where the hostname should be - file://_BLANKHOSTNAME_/ . Here's more info if you're curious.

For your localhost/new1.css to work, it needs to be prefixed with http:// like this:

href="http://localhost/new1.css"

Otherwise it's interpreting localhost as if it were a directory name and not the hostname.

Answer 4

I think the problem is with file: or localhost in firefox, I saved the file in dropbox and used that link it worked.

    var s = document.createElement('link');
    s.setAttribute('href', 'https://dl-web.dropbox.com/get/new1.css?w=AACLoomOT900PfGVqEuu9rHP4NlewdOq0KaSZbhzmgyG1A&dl=1');
    s.setAttribute('rel', 'stylesheet');
    s.setAttribute('type', 'text/css');
    document.getElementsByTagName('head')[0].appendChild(s);
    alert('Stylesheet injected!');

But is there any setting in the linux for apache and file to make it work locally.

Answer 5

One possible problem might be the path you have

file:///home/simha/.public_html/new1.css

When you allow per user directories in Apache, it is usually public_html without a leading dot. So, when you rename the directory to /home/simha/public_html , http://localhost/~simha/new1.css should work as expected.

Your code works as is, at least when you use an absolute URL

<button type="button" class="btn btn-info">Info</button>

In the Javascript, I replaced your CSS with the publicly accessible Bootstrap CSS

s.setAttribute('href', 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');

everything else is left as is, see JSFiddle

As you can see, the button is coloured like the Info button in the docs at Bootstrap - Buttons .

Answer 6

If you did not solve this problem yet,

1. Serve all static content from a (http) server of your choice. Do not use file system paths. Firefox wont load them ( in a web page context )
2. Try to put all the static resources along with your html, and serve them with relative url.

Now try this thing. open view source, and check if the css path is clickable and is fetching the content according to your expectation. If not, directly access that file from address bar of the browser. (Make sure your localhost is running and you have put all your files related to this in the web server - I normally use /var/www/). Use the path that works like this in your html too. (no file:// protocol, remember).

If you are not success by these, WWJD.

Also tell us when you are successful.