Question

我加载任何网页。然后打开firebug控制台并运行下面的javascript，它在页面的头部创建一个链接元素。代码如下。

    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!');

文件的内容：///home/simha/.public_html/new1.css

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

我在firebug控制台中运行代码，以下内容出现在html

的头部

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

但身体的背景颜色（变为蓝色）没有变化。

我独立于编辑firebug中的css检查了css规则，背景颜色变为蓝色。

我安装了apache web服务器。所以我也试过而不是“file：///home/simha/.public_html/new1.css”到“localhost / ~simha / new1.css”仍然不起作用。

我正在使用firefox浏览器。

Answer 1

这是因为出于安全原因，只有当文档也从本地URI加载时，外部资源才能从本地URI方案（如file:）加载。

Answer 2

试试这个，

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

Answer 3

需要根据服务器的文档根目录引用名为new1.css的样式表。

所以你正在使用Apache，这意味着你要设置apache2.conf（或httpd.conf等）以及站点conf文件。您在此DocumentRoot配置中使用的路径将是参考点。从那里你只需要/path/to/new1.css。

所以在你的情况下，

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

将转换为

/new1.css

所以你的最终代码将是

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

当您为地址添加file:///前缀时，它不使用服务器文件系统来加载文件，而是使用客户端/用户。这是由于主机名应为 - file://_BLANKHOSTNAME_/的空白字符串。的 Here's more info if you're curious.

要使localhost/new1.css能够正常工作，需要以http://为前缀，如下所示：

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

否则，它会将localhost解释为目录名，而不是主机名。

Answer 4

我认为问题出在file：或firefox中的localhost，我将文件保存在dropbox中并使用了它工作的链接。

    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!');

但是在linux中是否存在apache和file的任何设置以使其在本地工作。

Answer 5

一个可能的问题可能是你的路径

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

当你在Apache中允许每个用户目录时，通常public_html 没有一个前导点。因此，当您将目录重命名为/home/simha/public_html时，http://localhost/~simha/new1.css应该按预期工作。

您的代码按原样运行，至少在使用绝对URL

时

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

在Javascript中，我将CSS替换为可公开访问的Bootstrap CSS

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

其他所有内容保持不变，请参阅JSFiddle

如您所见，该按钮的颜色与Bootstrap - Buttons文档中的信息按钮相似。

Answer 6

如果你还没有解决这个问题，

从您选择的（http）服务器提供所有静态内容。不要使用文件系统路径。 Firefox不会加载它们（在网页上下文中）
尝试将所有静态资源与您的 html，并使用相对网址提供服务。

现在试试这件事。打开视图源，并检查css路径是否可点击，并根据您的期望获取内容。如果没有，直接从浏览器的地址栏访问该文件。（确保您的localhost正在运行，并且您已将所有与此相关的文件放在Web服务器中 - 我通常使用/ var / www /）。在你的html中使用这样的路径。（没有file：//协议，请记住）。

如果你没有成功，WWJD。

告诉我们您何时成功。

css样式表没有添加

6 个答案: