[js项目]封装库-CSS[下]
2017-07-12 02:45
253 查看
封装库-CSS[下]
本篇,我们继续封装 CSS,主要探讨添加 class 和移除 class。并且能够添加 style 和link 元素的 css 规则。一. 获取节点问题
在获取 ID、TagName、Class 节点上,我们把 this.elements 放到了外部,导致实例化的this.elements 变成了公有化,所以,这个数组,我们必须放到内部。二. 继续封装 CSS
在节点上添加一个 class,这个知识点我们在之前已经学习过://添加 CLASS Base.prototype.addClass = function (className) { for (var i = 0; i < this.elements.length; i ++) { if (!this.elements[i].className.match(new RegExp('(\\s|^)' +className + '(\\s|$)'))) { this.elements[i].className += ' ' + className; } } return this; }
//移除 CLASS Base.prototype.removeClass = function (className) { for (var i = 0; i < this.elements.length; i ++) { if(this.elements[i].className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))) { this.elements[i].className = this.elements[i].className. replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' '); } } return this; }
//设置 link 或 style中的 CSS 规则 Base.prototype.addRule = function (num,selectorText, cssText,position) { var sheet = document.styleSheets[num]; if(typeofsheet.insertRule != 'undefined') { sheet.insertRule(selectorText + "{" + cssText + "}", position); } else if (typeof sheet.addRule != 'undefined') { sheet.addRule(selectorText, cssText, position); } };
//移除 link 或 style中的 CSS 规则 Base.prototype.removeRule = function (num, index) { var sheet = document.styleSheets[num]; if(typeofsheet.deleteRule != 'undefined') { sheet.deleteRule(index); } else if (typeof sheet.removeRule) { sheet.removeRule(index); } return this; };
PS:在 Web 应用中,很少用到添加 CSS 规则和移除 CSS 规则,一般只用行内和 Class ;因为添加和删除原本的规则会破坏整个 CSS 的结构,所以使用需要非常小心。
相关文章推荐
- [js项目]封装库-CSS[上]
- QiYuAdmin-Thymeleaf的include封装共用js和css(项目优化)
- QiYuAdmin-Thymeleaf的include封装共用js和css(项目优化)
- [js项目]封装库-CSS[下]
- [js项目]封装库-CSS[下]
- ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)
- 更新线上项目中的CSS,JS文件的实现
- CSS 圆角框进行JS封装版
- 解决项目里JS文件和CSS编码问题
- 收集了项目中常用的js函数和封装代码.
- 项目中如果管理前端文件CSS和JS
- 项目开发之前端css、img、js组织方式与管理方法
- 如何封装JS和CSS文件为服务器端控件
- (ASP.NET MVC4 入门学习笔记)学习自己建项目2----引入css和JS的配置、DBHelper及其他
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- django项目使用css、js等静态文件
- jsp还能引用项目外的js,css啊
- 如何封装JS和CSS文件为服务器端控件
- 如何封装JS和CSS文件为服务器端控件