css样式表没有被添加答案

【问题标题】：css stylesheet not getting addedcss样式表没有被添加
【发布时间】：2013-12-29 02:08:16
【问题描述】：

我加载任何网页。然后打开 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">

但是body的背景颜色没有变化（变成蓝色）。

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

我安装了 apache 网络服务器。所以我也尝试将“file:///home/simha/.public_html/new1.css”改为“localhost/~simha/new1.css”，但它仍然不起作用。

我使用的是火狐浏览器。

【问题讨论】：

身体有实际尺寸吗，您是否尝试使用html 代替。您是否打开控制台检查文件是否实际加载，并且没有返回 404 或其他错误。
并下载server
当我将 css 代码直接添加到 html 背景时变为蓝色。正如我提到的，我正在任何网站上尝试这个。我试过stackoverflow。 css规则没有问题。我用萤火虫检查过。
@SanthoshYedidi 看看我的回答。
"file:///" 是问题所在，因为它在客户端环境中没有意义

标签： javascript html css firefox

【解决方案1】：

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

【讨论】：

我认为问题出在文件：或本地主机上。因为我将文件保存在 Dropbox 中，并提供了有效的地址。

【解决方案2】：

试试这个，

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

【讨论】：

但是它怎么知道new1.css的路径
'new1.css' 将相对于您请求它的文件所在的文件夹。如果您在 /mywebsite，它将检查 /mywebsite/new1.css。正如已经说过的，您不能使用像“file:///home/username/...”这样的绝对文件路径，授予对文件系统的访问权限将是一个安全问题。相反，请尝试使用这样的相对路径。否则，使用 / 字符指定相对于您网站根目录（而不是文件系统）的路径。
谢谢。这是有道理的，但它至少应该允许在萤火虫中进行测试

【解决方案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 解释为目录名称而不是主机名。

【讨论】：

但是我们不能从我们为本地用户提供访问权限的 public_html 文件夹中引用。是否应该仅从文档根目录调用文件。
我是用 http:// 写的，但是 stackover 流说 localhost 是不允许的，它应该是块代码，我不知道如何制作。所以我删除了 http:
Web 服务器不是以用户名启动的，也没有相同的凭据。但是，如果您使用共享主机设置，文档根目录将根据您提供的任何设置为每个用户进行调整。无论哪种方式，只要该 CSS 文件与请求它的 HTML 文件位于同一目录中（并且权限允许网络服务器读取这两个文件），使用 href="new1.css" 而不使用前面的 / 就可以工作。确保 CSS 文件具有完全权限 (chmod 777 new1.css) 以排除这种情况。

【解决方案4】：

我认为问题出在 firefox 中的 file: 或 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 和文件的任何设置以使其在本地工作。

【讨论】：

【解决方案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 文档中的“信息”按钮类似。

【讨论】：

【解决方案6】：

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

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

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

如果这些都不成功，WWJD。

还告诉我们你什么时候成功。

【讨论】：