美文网首页
动态css文件加载

动态css文件加载

作者: _micang | 来源:发表于2020-02-28 11:18 被阅读0次

var Dynamic = (function() {

var cssPath ='/static/css/todolist/';

/** 动态css加载 */

    var loading = () => {

return {

css:function (file, path) {

if (!!path) {

cssPath = path;

}

var head =document.getElementsByTagName('head')[0];

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

link.href = getContentPath() +cssPath + file;

link.rel ='stylesheet';

link.type ='text/css';

head.appendChild(link);

},

js:function (file, path) {

if (!!path) {

cssPath = path;

}

var head =document.getElementsByTagName('head')[0];

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

script.src = getContentPath() +cssPath + file;

script.type ='text/javascript';

head.appendChild(script);

}

}

}

/* 获取根路径*/

    var getContentPath = () => {

let pathName =window.location.pathname;

return pathName.substr(0,pathName.substr(1).indexOf("/") +1);

}

return {

loading: loading

}

})()

/*异步加载css*/

new Promise(function (resolve, reject) {

resolve()

}).then(data => {

Dynamic.loading().css("todoList.css")

console.info("【全角色】TodoList.jsp动态加载css成功。")

return Promise.resolve(parseInt(${duties}) !=2)

}).then(data => {

if(data) {

Dynamic.loading().css("todoList-unSecretary.css")

console.info("【秘书角色】TodoList.jsp动态加载css成功。")

}

}).catch(error => {

console.error("TodoList.jsp动态加载css错误。")

})

相关文章

  • JavaScript动态加载js和css

    动态加载js 参考:javascript 性能优化 动态加载css 参考: 动态加载 css 方法实现和深入解析 ...

  • 动态css文件加载

    var Dynamic = (function() { var cssPath ='/static/css/tod...

  • 前端开发 踩坑总结

    1,Vue 当动态import 路由懒加载时。如果Vue文件中的Css也被import动态引入,可能会导致页面样式...

  • 前端动态加载js和css

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: 对象包含...

  • link 与 @import

    本质都是为了加载css文件,但还是有区别: 起源区别 加载顺序 页面被加载时,link引用的css文件会同时加载 ...

  • JS动态加载js/css文件

    var dynamicLoading = { css: function (path) { if (!path |...

  • Sass应用之实现主题切换

    背景 实现主题切换有几种不同的方案,比如使用CSS变量,使用JavaScript动态加载对应的主题样式文件等。本文...

  • js动态加载HTML元素时点击事件无效

    js动态加载HTML元素时点击事件无效: 是因为这些动态加载的这些HTML,是在css,js代码加载完后,再添加的...

  • webpack实战css加载

    webpack实战 1. 加载css的2中情况 行内加载 单独生成css文件加载1.1 行内加载我们使用webpa...

  • PHP页面静态化01

    动态页面与静态页面 动态页面:首先加载动态文件,将动态文件中的内容,如php文件, asp文件等 静态页面:静态的...

网友评论

      本文标题:动态css文件加载

      本文链接:https://www.haomeiwen.com/subject/lzmkhhtx.html