JS实现博客前端页面（二）—— 封装CSS

cyqian 发布于2019-08-22 10:37 / 2970人阅读

摘要：在实现博客前端页面一中已经实现了的一些基础封装，在本文中将继续封装封装方法如果在页面中给某些元素设置了属性，则需要使用属性名来获取这些节点，可以封装方法，具体代码如下获取节点数组首先所有的节点判断节点的是否与传入的一致将一致的节点保存到数组

在JS实现博客前端页面（一）中已经实现了CSS的一些基础封装，在本文中将继续封装CSS

封装getClass()方法

如果在页面中给某些元素设置了class属性，则需要使用class属性名来获取这些节点，可以封装getClass()方法，具体代码如下：

//获取class节点数组
Base.prototype.getClass=function(className){
    //首先所有的节点
    var arr = document.getElementsByTagName("*");
    for (var i=0;i
但有时候，我们不需要把所有获取到的class都设置CSS，只需要设置其中的某一个，这时我们可以进行筛选，封装getElement()方法，代码如下：
//获取某一个节点,传入节点的number值
Base.prototype.getElement=function(num){
    //获取传入num对应的element值
    var element = this.elements[num];
    //清空this.elements数组
    this.elements = [];
    //将获取的element值再加入到数组中,当前数组中只有一个值
    this.elements[0]=element;
    //返回Base对象
    return this;
}
//调用方法
window.onload=function(){
    $().getClass("red").getElement(1).css("color","red").html("title");
};

如果需要设置的css有区域的划分，如需要设置id="aaa"区域中的class="red"的color:red；id="bbb"区域中的class=‘red’的color:green;则需要在css方法中传入区域的id值，代码如下：
//获取class节点数组
Base.prototype.getClass=function(className,id){
    //定义node用于获取节点的范围
    var node=null;
    //判断传入的参数个数，如果传入两个参数，则node为传入id下的
    if(arguments.length==2){
        node = document.getElementById(id);
    }else{
        //默认时为全部节点
        node = document;
    }
    //首先所有的节点
    var arr = node.getElementsByTagName("*");
    for (var i=0;i
封装addClass()方法
如果我们在style样式表里设置了class a , class b的样式，并需要在指定的元素节点上可以同时应用a、b 的样式，可以封装addClass()方法，具体代码如下：
    //添加class,要求元素节点上可以同时添加多个class值,以空格隔开
    Base.prototype.addClass=function(className){
        for (var i=0;i
封装removeClass()方法
如果我们在需要移除指定的元素节点上的某个class的样式,可以封装removeClass()方法，具体代码如下：
//移除class,传入需要移除的className
Base.prototype.removeClass=function(className){
    for (var i=0;i
以上内容来自李炎恢老师JavaScript课程实战篇笔记整理

GPU服务器云服务器 JS轻松实现CSS设置 js实现页面表格 js 实现页面滑动 js实现页面跳转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90932.html

JS实现博客前端页面（四） —— 封装弹窗组件

摘要：在实现博客前端页面一和实现博客前端页面二中已经实现了对获取元素和样式相关的方法的封装，本文将在实现博客前端页面三的基础上实现弹窗组件封装。在JS实现博客前端页面（一）和JS实现博客前端页面（二）中已经实现了对获取DOM元素和CSS样式相关的方法的封装，本文将在JS实现博客前端页面（三）的基础上实现弹窗组件封装。界面设计如下图所示，在点击登录按钮后，会弹出网站登录的弹窗：该弹窗组...

PumpkinDylan 2019-08-22 10:37 评论0 收藏0
JS实现博客前端页面（三） ——封装下拉菜单

摘要：在实现博客前端页面一和实现博客前端页面二中已经实现了对获取元素和样式相关的方法的封装，本文将实现下拉菜单组件封装。在JS实现博客前端页面（一）和JS实现博客前端页面（二）中已经实现了对获取DOM元素和CSS样式相关的方法的封装，本文将实现下拉菜单组件封装。下拉菜单界面设计创建一个顶部header区域，放入logo图片和个人中心，鼠标滑过个人中心时，会显示下拉菜单，鼠标移出时会...

_Suqin 2019-08-22 10:37 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
JS实现博客前端页面（一）—— 封装基础库

摘要：创建基本库首先创建一个基本库，名字叫做用于编写最常用的代码，然后不断的扩展封装。 1、创建基本库首先创建一个基本库，名字叫做base.js,用于编写最常用的代码，然后不断的扩展封装。在最常用的代码中，最常用的就是获取节点的方法。这里我们可以编写代码如下： //创建base.js //整个库可以是一个对象 var Base={ //方法名尽可能简短而富有意义 getId...

UCloud 2019-08-22 10:36 评论0 收藏0