前端自动生成/加载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 ...
随机推荐
- 网站开发常用jQuery插件总结(14)图片修剪插件Jcrop
一.插件功能 用于对图片进行修剪.但是在使用Jcrop时,还需要配合服务器端开发语言(如asp.net,php等)使用. 二.官方地址 http://deepliquid.com/content/Jc ...
- 玩转HTML5移动页面(优化篇)
原文:http://www.grycheng.com/?p=472 承接上文<玩转HTML5移动页面(动效篇)>,上次说的是让页面动起来的一些小技巧.而页面动起来的根基是功能可用的页面,因 ...
- html锚点
ID模式 <h3><a href="#start">开始</a></h3> <div> 你好 <b/> &l ...
- python实现模拟登录【转】
原文网址:http://www.blogjava.net/hongqiang/archive/2012/08/01/384552.html 本文主要用python实现了对网站的模拟登录.通过自己构造p ...
- citrix xen server 虚拟机无法关闭的问题
悲剧的一台windows的虚拟机无法重启无法关机.如下图,一直卡住不动. 首先找到这台机器: [root@xenserver- xen]# xe vm-list name-label=-vss\ se ...
- POJ 1961 Period KMP算法next数组的应用
题目: http://poj.org/problem?id=1961 很好的题,但是不容易理解. 因为当kmp失配时,i = next[i],所以错位部分就是i - next[i],当s[0]...s ...
- makefile debug
1. 使用warning指令 warning 是个不错的命令,可以打印出消息,来判断makefile执行的流程 2.使用ifeq ifneq 当makefile被多次调用到的时候,如果都输出warni ...
- Docker入门
-----------------------------------------Docker入门教程(一)介绍Docker入门教程(二)命令Docker入门教程(三)DockerFileDocker ...
- Net Core Docker
Net Core Docker轻量级的web框架 .net core现在已经有了大的发展,虽然笔者现在已经从事python开发,但是一直在关注.net的发展,在逛博客园的时候,发现有大家都会提到N ...
- 在ajax当中使用url重写来避免url的暴露
记得一次面试,有这样一道面试题:jsp页面当中需要用到ajax的实现,此时需要调用java的url:此时的问题是如果用户查看页面源码就能看到真是的url,这个问题如何避免.说实话,AJAX我用的只是皮 ...