Heim  >  Fragen und Antworten  >  Hauptteil

javascript - 关于动态改变<link>标签的href

如题,我创建了两个<li>分别给他们添加了点击事件,在<link>里我添加了id = "changecss",代码如下:

<link rel="stylesheet"  type="text/css" id = "changecss" href="css/index.css">
        <ul>
            <li class="active" on click="javascript:document.getElementById('changecss').href ='css/index.css'">首页案例</li>
            <li class = "li2" on click="javascript:document.getElementById('changecss').href ='css/change.css'">详情页案例</li>
        </ul>

但是还是无法改变<head>里的<link>标签里的href的路径,还是会加载原本的css,但新建的css文件里的css也有效果,所以特来向各位求助。。。。

黄舟黄舟2721 Tage vor791

Antworte allen(5)Ich werde antworten

  • 怪我咯

    怪我咯2017-04-11 13:06:14

    修改href属性确实会触发浏览器加载css,但是这样会带来很多新问题,其他元素css错乱等,不太好维护。比较好的做法是动态添加css
    给你提供个动态加载css的方法。

     var addCss = function(path){
        if(!path || path.length === 0){
            throw new Error('argument "path" is required !');
        }
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = path;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    };

    如果你不想加载css/index.css,一开始就不需要写<link rel="stylesheet" type="text/css" id = "changecss" href="css/index.css">

    Antwort
    0
  • 黄舟

    黄舟2017-04-11 13:06:14

    要加载的东西已经加载了,你再改变又有什么用呢。要实现你所说的效果,你可以新建一个link,指定href,然后插入。

    Antwort
    0
  • 迷茫

    迷茫2017-04-11 13:06:14

    路径可以修改,但是html解析的时候是从上到下的,link标签先解析引入css文件,到后面用js再去修改路径,link也不会再去加载了

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-11 13:06:14

    按照你写的并没有错啊,不对的地方就是onclick不应该有空格

    Antwort
    0
  • 怪我咯

    怪我咯2017-04-11 13:06:14

    百度搜索一下“动态更新CSS”,或者“动态修改CSS”,“动态引入CSS”之类的关键字,可以得到一大堆结果

    顺手给你一个
    http://www.aichengxu.com/view...

    Antwort
    0
  • StornierenAntwort