前言:

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的更多相关文章

  1. ExtJs基础知识总结:自定义弹窗和ComboBox自动联想加载(四)

    概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌 ...

  2. yii2 如何在页面底部加载css和js

    作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  3. 动态加载css方法实现和深入解析

    一.方法引用来源和应用  此动态加载css方法 loadCss,剥离自Sea.js,并做了进一步的优化(优化代码后续会进行分析).  因为公司项目需要用到懒加载来提高网站加载速度,所以将非首屏渲染必需 ...

  4. Webpack 2 视频教程 011 - Webpack2 中加载 CSS 的相关配置与实战

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  5. 异步加载css 和 谷歌浏览器各实用小工具介绍

    异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...

  6. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  7. CI模板加载css和js

    1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config-&g ...

  8. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  9. Intellij如何设置编译后自动重新加载class文件?

    前段时间突然发现Intellij不能自动重新加载类了,每次编译后都要重新启动项目,才能显示更新效果,后来网上查询Intellij下如何配置热部署,都说是要配置构件,然后在web容器的编辑页面选择upd ...

随机推荐

  1. mysql 5.7.16多源复制

    演示一下在MySQL下搭建多主一从的过程. 实验环境: 192.168.24.129:3306 192.168.24.129:3307 192.168.24.129:3308 主库操作 导出数据 分别 ...

  2. Linux下通过软链接转移mysql目录,解决分区空间不足(转)

    http://darwinclub.info/wp/?p=454(转) 当存放数据库分区的空间不足时,可以采取对数据库目录进行迁移的方法,具体步骤如下:1.先关闭数据库mysqladmin -p sh ...

  3. centos 6.5 安装jenkins

    Installation sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.rep ...

  4. NFS,FTP

    一. NFS1. NFS简介NFS全称是network file systemNFS允许一个系统在网络上与他人共享目录和文件.通过使用NFS,用户和程序可以像访问本地文件一样访问远端系统上的文件. 假 ...

  5. nginx服务器的日志太多:定期执行脚本删除

    #!/bin/bash -type f -name *.log | xargs rm -f 脚本名字autodellog.sh 设置定时器(每天凌晨一点执行) [root@localhost ~]# ...

  6. Asp.net MVC2中你必须知道的扩展点(一):Controller Factory

    Asp.net mvc2中提供很多可以扩展的地方,利用这些扩展之后,asp.net mvc使用起来更加灵活.Simone Chiaretta曾写过一篇文章:13 ASP.NET MVC extensi ...

  7. iOS性能调优

    写在前面 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...

  8. LightOj_1321 Sending Packets

    题目链接 题意: 给一个数据大小为S的数据包, 每一次发送需要K秒(单向),现在要从节点0 发送到节点 n-1. 其中有n - 1条路径, 每条路径都有一个传输成功率. 问传输成功所需最小时间的期望. ...

  9. logger.debug,logger.info,logger.warn,logger.error,logger.fatal的区别

    logger.debug,logger.info,logger.warn,logger.error,logger.fatal的区别 logger.debug,logger.info,logger.wa ...

  10. python JSON处理

    概念 序列化(Serialization):将对象的状态信息转换为可以存储或可以通过网络传输的过程,传输的格式可以是JSON.XML等. 反序列化:就是从存储区域(JSON,XML)读取反序列化对象的 ...