前端自动生成/加载CSS
前言：
1、我很懒！
2、写样式时，很多时候需要单独设置长度、宽度、内间距、外间距等。于是，就会有很多CSS代码会出现很多类似以下的代码：
.w20: { width: 20px; }
.mt10: { margin-top: 10px; }
我遇到过有些页面，只需要一个.w20的样式，所以我是新建一个CSS文件来存放呢，还是直接写在<head>里面呢 ... 请原谅选择困难症患者 ...
3、自己写的js插件（或者是将别人的插件重新包装一次），一般来说至少会有两个文件：xxx.css & xxx.js。于是每次使用时，<link>和<script>都需要配对书写；
这次的目的就是，类似的CSS代码，在某个地方，只在需要的时候会自动生成；引用外部样式文件时，不需再手写，也是在某个地方，只在需要的时候会自动引用；
别跟我讨论什么seo，什么网页加载渲染速度，我就是觉得这样很方便。
正文：
做法就是，利用js代码，在<head>中添加<style>或<link>标签。没错，就这么简单！
首先是核心代码（以下所有js代码均使用jquery库）：
/* 加载CSS样式
参数说明
paras:
id -> 标签ID default null
css -> 样式字符串
href -> 文件路径
*/
var loadCSS = function (paras) {
var id = paras && paras.id ? paras.id : undefined;
var css = paras && paras.css ? paras.css : undefined;
var href = paras && paras.href ? paras.href : undefined; if (id && $('#' + id).length) {
return;
} var head = document.getElementsByTagName('head')[0];
if (css) {
var style = document.createElement('style');
if (id) { style.id = id; }
style.type = 'text/css';
try {
if (style.styleSheet) {
style.styleSheet.cssText += css;
} else if (document.getBoxObjectFor) {
style.innerHTML += css;
} else {
style.appendChild(document.createTextNode(css))
}
} catch (ex) {
style.cssText += css;
}
head.appendChild(style);
}
if (href) {
if (!$('link[href="' + href + '"]').length) {
var link = document.createElement('link');
if (id) { link.id = id; }
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;
head.appendChild(link);
}
}
}
这个方法的作用是：首先根据传进来的ID，判断是否已生成过；然后对传进来的CSS代码进行包装合并，添加到<head>标签的最尾端；再对传进来的外部样式文件路径进行包装合并，添加到<head>标签的最尾端；
然后是自动生成CSS代码部分：
/* 动态生成样式 */
var CssList = [];
var GenerateCSSRegs = {
Width: /(w\d+p?)/g,
Height: /(h\d+p?)/g,
LineHeight: /(lh\d+)/g,
Margin: /(m[trbl]?n?\d+)/g,
Padding: /(p[trbl]?n?\d+)/g
};
var autoGenerateIconStyle = function () {
var css = '\n'; $('[class]').each(function () {
var $e = $(this);
var cssclass = $e.attr('class'); // WIDTH
var result = cssclass.match(GenerateCSSRegs.Width);
if (result && result.length) {
$.each(result, function (i, v) {
if (!CssList.contains(v)) { // 自己扩展的方法，同Linq
if (v.contains('p')) {
css += '.' + v + ' { width: ' + GetStringNumValue(v) + '%; }\n'; // GetStringNumValue 取出字符串中的数字；p结尾的值，代表百分比
} else {
css += '.' + v + ' { width: ' + GetStringNumValue(v) + 'px; }\n';
}
CssList.push(v);
}
});
} // HEIGHT
// ... // LINEHEIGHT
// ... // MARGIN
result = cssclass.match(GenerateCSSRegs.Margin);
if (result && result.length) {
$.each(result, function (i, v) {
if (!CssList.contains(v)) {
var direction = v.contains('t') ? '-top' : v.contains('r') ? '-right' : v.contains('b') ? '-bottom' : v.contains('l') ? '-left' : '';
css += '.' + v + ' { margin' + direction + ': ' + (v.contains('n') ? '-' : '') + GetStringNumValue(v) + 'px; }\n'; // n开头的值，代表负值
CssList.push(v);
}
});
} // PADDING
// ...
}); loadCSS({ css: css }); // 调用生成的方法
};
页面元素中，依旧使用原来的写法，js会根据写的样式，使用正则表达式判断是否需要生成。
例如：<div class="w20 mt20 custom-css"></div>，js会判断并自动生成.w20 & .mt20，而.custom-css并不在配置中，所以不会有这个样式的生成。
根据书写的值，包装样式，合并成字符串（相同的样式只生成一次 - CssList控制）。最后，调用上面的方法，将样式字符串传入即可。
而自动加载部分，只需调用
loadCSS({ id: 'xxx', href: 'xxx.css' });
就行了，至于id和href的值，可以在其他地方进行配置。
所以，在页面代码中，我只需写很少的代码，却可以达到相同的结果：
打开的页面的源码：
后话：
试过自动加载js文件，有些可以有些不行。至于为什么，自己去试试就知道了 ...
前端自动生成/加载CSS的更多相关文章
- ExtJs基础知识总结：自定义弹窗和ComboBox自动联想加载（四）
概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌 ...
- yii2 如何在页面底部加载css和js
作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...
- 动态加载css方法实现和深入解析
一.方法引用来源和应用 此动态加载css方法 loadCss,剥离自Sea.js,并做了进一步的优化(优化代码后续会进行分析). 因为公司项目需要用到懒加载来提高网站加载速度,所以将非首屏渲染必需 ...
- Webpack 2 视频教程 011 - Webpack2 中加载 CSS 的相关配置与实战
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- 异步加载css 和 谷歌浏览器各实用小工具介绍
异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- CI模板加载css和js
1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config-&g ...
- webpack模块加载css文件及图片地址
webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...
- Intellij如何设置编译后自动重新加载class文件？
前段时间突然发现Intellij不能自动重新加载类了,每次编译后都要重新启动项目,才能显示更新效果,后来网上查询Intellij下如何配置热部署,都说是要配置构件,然后在web容器的编辑页面选择upd ...
随机推荐
- Python3 基础
Hello world 在文本编辑器中,键入python执行代码,保存文件为hello.py print('hello, world') 注意print前面不要有任何空格.然后,选择一个目录,例如C: ...
- 关于Hyper-V虚拟机中的vEthernet虚拟网卡不能联网的问题
Hyper-V虚拟机在我电脑里面已经有一年了,当初是因为windows8系统里面需要装Hyper-V,这样才能不让win8死机,就折腾了一整子,结果碰到vEthernet网卡不能联网,网上相关的资料少 ...
- HTML5 File API
1.File API 一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍.File API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的 ...
- mvc中的OutputCache
mvc4中有一个标记属性OutputCache,用来对ActionResult结果进行缓存,如何理解呢?概括地说,就是当你的请求参数没有发生变化时,直接从缓存中取结果,不会再走服务端的Action代码 ...
- PCB设计之原理图绘制笔记
02原理图工作环境设置原理图画布由画布和边界(Border)构成.可以通过DocumentOptions设置(快捷键DO).DocumentOptions设置--------------------- ...
- iOS 9适配技巧
中文快速导航: 1.iOS9网络适配_ATS:改用更安全的HTTPS(见Demo1) i. WHAT(什么是SSL/TLS?跟HTTP和HTTPS有什么关系) ii. WHY(以前的HTTP不是也能用 ...
- 如何在Win10中启用和关闭管理员账户？
和Win7/Win8.1一样,Win10的管理员账户Administrator是默认隐藏和关闭的,因为该账户权限极高,被不法分子利用后存在极大风险.但如果你想在某些特殊情况下使用该账户,就需要手动将其 ...
- dustjs
http://akdubya.github.io/dustjs/ https://github.com/linkedin/dustjs
- 定位 - MapKit - 基本使用
/** * Terminating app due to uncaught exception 'NSInvalidUnarchiveOperationException', reason: 'Co ...
- 结缘PDO
起因 一直没有注意看数据库相关知识 几个月之前,无意打开如下一段代码: 被人吐槽是N年前的写法.后来也是学习需要,单一mysql已经不合适了.于是上网搜了一下好方法,PDO迎面而来. 诱惑 上网浏览时 ...