[js项目]封装库-CSS[下]
2018-01-17 00:00
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 的结构,所以使用需要非常小心。
相关文章推荐
- QiYuAdmin-Thymeleaf的include封装共用js和css(项目优化)
- QiYuAdmin-Thymeleaf的include封装共用js和css(项目优化)
- [js项目]封装库-CSS[上]
- [js项目]封装库-CSS[下]
- [js项目]封装库-CSS[下]
- vue2.0项目 calendar.js(日历组件封装)
- SpringMVC WEB项目 jsp引入的js,css文件找不到路径问题
- javaWeb项目修改css或者js文件后,浏览器却不能加载新版本
- 如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
- maven项目中使用pom文件给js css 打版本号
- 原生JS封装库——CSS下
- windows还原后,eclipse创建的jsp项目css和js失效的问题
- 解决:maven项目无法引入js,css的问题
- 企业项目中js方法的封装和使用
- web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法
- js的封装库css
- 利用js、jQuery和css实现环形进度条组件封装
- 使用Tomcat部署项目在浏览器中访问的时候JS和CSS等静态文件无法加载的问题
- QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)
- SpringMVC架构的项目 js,css等静态文件导入有问题的解决方法