如何使用Javascript加载CSS文件？

是否可以使用Javascript将CSS样式表导入html页面？如果是这样,怎么办呢？

PS javascript将托管在我的网站上,但我希望用户能够放入他们网站的标签,并且它应该能够将我服务器上托管的css文件导入到当前的网页中.(css文件和javascript文件都将托管在我的服务器上).

1> 小智..：

---

这是"老派"的做法,希望能在所有浏览器中使用.从理论上讲,setAttribute不幸的是IE6并不能始终如一地支持它.

var cssId = 'myCss';  // you could encode the css path itself to generate id..
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.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

此示例检查是否已添加CSS,因此仅添加一次.

将该代码放入javascript文件中,让最终用户只包含javascript,并确保CSS路径是绝对的,以便从服务器加载.

VanillaJS

下面是一个使用纯JavaScript head根据URL的文件名部分将CSS链接注入元素的示例:

在结束head标记之前插入代码,并在呈现页面之前加载CSS.使用外部JavaScript(.js)文件将导致出现无格式内容(FOUC)的Flash .

---

也许最好为文档快捷方式使用与$不同的字符,因为它可以轻松地干扰jQuery(就像我的情况一样);)

---

一旦CSS文件加载后运行回调怎么办？

---

@ zathrus-writer尝试jQuery.noConflic(); http://api.jquery.com/jQuery.noConflict/

---

@jonnybojangles使用jQuery.noConflict意味着将所有对jQuery的引用重命名为$.为CSS加载器使用不同的变量名称会简单得多.

2> BoumTAC..：

---

如果你使用jquery:

$('head').append('');

3> VonC..：

---

我想像这样的脚本会做的事情:

该JS文件包含以下语句:

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

如果要引用您的网站,javascript和css的地址必须是绝对的.

许多CSS导入技术在这篇"使用分支技术对CSS hack说"中的文章中进行了讨论.

但是"使用JavaScript动态添加Portlet CSS样式表"文章还提到了CreateStyleSheet的可能性(IE的专有方法):

    


    

        

            
            

                
                    
                
            

            

                虎仔球妈_459            

            

                这个屌丝很懒，什么也没留下！            
            
            


                                
                    
                    关注作者
                            

        
    


    

        
Tags | 热门标签
        

            

                                

                    actionscrip
                
                                

                    bash
                
                                

                    c#
                
                                

                    c++
                
                                

                    c语言
                
                                

                    erlang
                
                                

                    flutter
                
                                

                    go
                
                                

                    golang
                
                                

                    java
                
                                

                    javascript
                
                                

                    lua
                
                                

                    node.js
                
                                

                    perl
                
                                

                    php
                
                                

                    python
                
                                

                    scala
                
                                

                    typescript
                
                                

            
        
    


    

        
RankList | 热门文章
        

            

                                

                    1空白文本框值的Javascript不会工作,但jquery会
                
                                

                    2在Django过滤器语句中__in和等号(=)之间有什么区别？
                
                                

                    3如何更快地进行这种按位操作？
                
                                

                    4您如何使用已编译的Typescript使用Istanbul Code Coverage？
                
                                

                    5在docker容器中不能jcmd,jps或jstat cassandra进程
                
                                

                    6在使用Jest单元测试React组件时如何模拟子组件
                
                                

                    7inf2cat for Win10驱动程序签名
                
                                

                    8没有迭代的NumPy中的累积计数
                
                                

                    9在Linux内核模块中实现轮询
                
                                

                    10有没有办法记录或记录R函数的输出？
                
                                

                    11NPM脚本 - 配置变量和命令替换在package.json中不起作用
                
                                

                    12java中的类未找到异常？
                
                                

                    13MATLAB调试:更智能的方法来停止具有特定条件的代码？
                
                                

                    14为什么在Visual Studio 2015中配置设备之前出现错误？
                
                                

                    15JavaScript中的canvas ImageData是否包含EXIF信息？
                
                                

                    16不是`QPoint`支持`std :: unique_ptr`？
                
                                

                    17在Java中修改窗口菜单
                
                                

                    18在Symfony 2.8,3.0及更高版本中将数据传递给buildForm()
                
                                

                    19如何使用比例大小的项目创建QML GridLayout？
                
                                

                    20有没有办法在C#5中模仿C#6 Null-Conditional运算符