关于css:动态加载JSCSS教学

39次阅读

共计 1125 个字符，预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=p, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.mask{

   border: 1px solid #333;

   width:100px;

   height:20px;

   background-color: #ffcccc;

}

</style>

</head>

<body>

   <p><span class="te"> 我我哦我我 </span></p>

   <p><span class="te"> 我我哦我我 </span></p>

    <p><span class="te"> 我我哦我我 </span></p>

   <div class="mask">1222</div>

   <button onclick="change()">changeColor</button>

</body>

<script>

// 定义加载办法

function loadjscssfile(filename,filetype){

 // 判断 js 文件

   if(filetype == "js"){

      // 创立 script 标签

       var fileref = document.createElement('script');

  fileref.setAttribute("type","text/javascript");

  fileref.setAttribute("src",filename);

   }else if(filetype == "css"){  // 判断 css 文件

 // 创立 link 标签

  var fileref = document.createElement('link');

  fileref.setAttribute("rel","stylesheet");

  fileref.setAttribute("type","text/css");

  fileref.setAttribute("href",filename);

 }

   if(typeof fileref != "undefined"){document.getElementsByTagName("head")[0].appendChild(fileref);

   }

}

function change(){loadjscssfile("static/test.css","css");

}

</script>

</html>

正文完