dom形式写的页面怎么去调用外部css文件来加载样式


        var el = document.createElement('link');
        el.setAttribute('rel', 'stylesheet');
        el.setAttribute('type', 'text/css');
        el.setAttribute("href", file);
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(el);

解决方案 »

  1.   

    结果跟我直接在<head>标签里使用<link rel="stylesheet" href="css/style.css" />一样，有些效果还是没加载进来
      

  2.   

    不需要特殊处理，动态添加的节点自动会应用样式的。你检查一下你的背景图片路径对不对。
    演示代码<html>
    <head>
    <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
    </body>
    <script type="text/javascript">
    var bannerDiv = document.createElement("div");
    document.body.appendChild(bannerDiv).id = "banner";
    var banner1 = document.createElement("div");
    bannerDiv.appendChild(banner1).id = "banner1";
    </script>
    </html>
    #banner1 {
        width: 300px;
        height: 300px;
        background: #00ff00 url('http://avatar.csdn.net/3/B/6/1_u010621047.jpg') no-repeat center;
    }
      

  3.   

    呵呵  把它放到方法里面 然后
    初始化执行
    用 jquery 的就 $(function(){   //写到这里});
    js源生   window.onload=function (){
    //这里
    }
      

  4.   

    你是新建的一个style文件放的css吗？直接拖到页面中没有效果吗？
      

  5.   

    设置了id了，干嘛还要设置class？
      

  6.   

    哪些样式没有效果？如果已经有部分效果实现了，那说明是部分css本身的问题，而不是因为dom是动态加载的问题
      

  7.   

    比如body的背景图，还有一些font样式实现了，banner1的背景却没有出来，css本身什么问题呢？我直接写在html里，不用dom的时候就能正常实现的
      

  8.   

    直接在页面link引用这个css，并在页面里写好banner1，如果正常，如上方法就没问题，如果不正常，怎么写都不会正常
      

  9.   

    把你的页面和css代码贴出来看看。
    上面的演示代码在你的机器上有问题吗？你的css里面加上一个比较大的z-index试试，看看是不是层的层次问题。
      

  10.   

    搞定了，原来我css里是对.class作用的，dom里写成id了
    还有个问题，用dom怎么添加符号，比如“ | ”这个，但不放在标签里，单独的
      

  11.   

    使用document.createTextNode可以创建文本节点。如果你想应用样式的话，可以创建一个span标签来容纳文本，并对这个span设置样式。具体的看演示代码var txt1 = document.createTextNode("||||||");
    bannerDiv.appendChild(txt1);
      

  12.   

    谢谢你啊，还有个问题想问下，对dom形式写的页面样式表里设置的margin/padding的大小会不会跟直接写的不一样？
      

  13.   

    dom形式和样式表是一样的，但是不同浏览器可能不一样。
      

  14.   

    那就怪了，同样的页面，直接写在body里的元素，然后调用外部css，margin/padding是正常的，用dom写的，调用外部css后就不一样了
      

  15.   

    我更新了演示代码
    上下两部分，分别是直接写在body里面的和js动态添加的，我在IE11和Chrome34里面看到的是一样的。
    试试在你的浏览器里面是不是一样。