将外部CSS文件链接到JavaScript文件中

14 浏览
0 Comments

将外部CSS文件链接到JavaScript文件中

是否可以使用Javascript将CSS样式表导入到HTML页面中？如果可以，如何实现？附：Javascript将托管在我的站点上，但我希望用户能够将其放入他们网站的标签中，并且它应该能够将我服务器上托管的CSS文件导入到当前网页中（CSS文件和Javascript文件都将托管在我的服务器上）。

0

3 答案

0 Comments

从上面的内容中可以整理出以下内容：

问题的出现原因：需要将外部CSS文件链接到JavaScript文件中。

解决方法：

1. 使用script标签将外部CSS文件链接到JavaScript文件中：

styles.js文件中的代码：

if (!document.getElementById) document.write('');

2. 使用document.createStyleSheet方法（IE浏览器专有方法）动态添加CSS样式表：

3. 在不支持document.createStyleSheet方法的浏览器中，可以使用其他方法来添加CSS样式表，具体方法参考stackoverflow上的解决方案。

4. 有时，不推荐使用document.write方法，因为它会覆盖整个网页的内容。可以使用其他方法来获取style元素，而不是假设它是head元素的第一个子元素。具体方法可以参考groups.google上的讨论。

以上就是将外部CSS文件链接到JavaScript文件的解决方法。

0
0 Comments

问题出现的原因是，使用jQuery的append()函数动态添加外部CSS文件，只有在页面加载之前注入样式表才有效。当在已加载的页面上运行此命令，并且使用托管在Dropbox上的CSS文件时，它将无法正常工作。

解决方法是使用JavaScript的createElement()和setAttribute()函数来动态创建元素，并将其附加到标签中。以下是解决方法的代码：

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
document.head.appendChild(link);

对于使用托管在Dropbox上的CSS文件的情况，可以使用以下代码：

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://dl.dropboxusercontent.com/s/ep1nzckmvgjq7jr/remove_transitions_from_page.css';
document.head.appendChild(link);

通过使用createElement()和setAttribute()函数，可以在任何时候动态链接外部CSS文件，而不仅仅是在页面加载之前。

0
0 Comments

将外部CSS文件链接到JavaScript文件是一个常见的需求。下面是一些解决这个问题的方法。

首先，我们可以使用传统的方法来实现，该方法在所有浏览器中都可以正常工作。代码如下：

var cssId = 'myCss';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = cssId;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.example/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

这个例子会检查CSS是否已经被添加，只有在还没有添加的情况下才会添加。将这段代码放入一个JavaScript文件中，让最终用户将这个JavaScript文件包含进来，确保CSS路径是绝对路径，这样它就会从你的服务器加载。

另一种方法是使用纯JavaScript来根据URL的文件名部分将CSS链接注入到`head`元素中。代码如下：

var file = location.pathname.split("/").pop();
var link = document.createElement("link");
link.href = file.substr(0, file.lastIndexOf(".")) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName("head")[0].appendChild(link);

将这段代码放在结束的`head`标签之前，这样CSS文件将在页面呈现之前加载。使用外部JavaScript文件（.js）会导致出现无样式内容的闪烁（FOUC）。

如果想要在CSS文件加载完成后运行一个回调函数，这就要复杂得多了。一些流行的JavaScript库通常都有一些形式的加载JavaScript和样式表并带有回调函数的功能。例如，可以使用YUI Get来实现这个功能。

以上是将外部CSS文件链接到JavaScript文件的一些解决方法。希望可以帮助你解决这个问题。如果你还有其他问题，请参考提供的链接获取更多信息。

0