动态添加删除css/js文件

最新推荐文章于 2023-12-04 18:45:53 发布

Paul_Chan_

最新推荐文章于 2023-12-04 18:45:53 发布

阅读量889

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43422861/article/details/108564035

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="a">动态改变字体样式</div>
        <button onclick="addCss('./css/a.css')">添加css文件</button>
        <button onclick="removejscssfile('./css/a.css','css')">删除css文件</button>
        <button onclick="addjs('./js/b.js')">添加js文件</button>
        <button onclick="removejscssfile('./js/b.js','js')">删除js文件</button>
    </div>
    <script>
        //动态添加css样式文件
        function addCss(cssUrl){
            var linkObj = document.createElement("link");
            linkObj.setAttribute("href",cssUrl);
            linkObj.setAttribute("rel","stylesheet");
            document.body.appendChild(linkObj);
        }
        //动态添加js文件
        function addjs(jsUrl){
            var linkObj = document.createElement("script");
            linkObj.setAttribute("src",jsUrl);
            document.body.appendChild(linkObj);
        }
       //删除js/css文件
        function removejscssfile(filename,type){
            var targetelement;
            var targetattr
            if(type == 'css')
            {
                targetelement = 'link';
                targetattr = 'href';
            }
            else
            {
                targetelement = 'script';
                targetattr = 'src';
            }

            var allsuspects=document.getElementsByTagName(targetelement);

            for (var i=allsuspects.length-1; i>=0; i--)
            {
                if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
                    allsuspects[i].parentNode.removeChild(allsuspects[i]);
                }  
            }
        }
    </script>
</body>
</html>

Paul_Chan_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态添加删除css/js文件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div>
复制链接

扫一扫