JavaScript高手之路：封装css方法和Table表格

「已注销」

于 2019-02-13 10:17:29 发布

阅读量1.5k

点赞数 3

分类专栏： WEB前端文章标签： JavaScript jQuery 面向对象

本文链接：https://blog.csdn.net/zhang5476499/article/details/86688622

版权

本文介绍了如何使用JavaScript字面量封装css方法和Table表格对象。通过Util工具类实现了类似jQuery的css方法，用于操作div的样式，同时详细讲解了封装Table对象的步骤，包括init和showTable方法，能够动态生成具有指定行数和列数的表格。文中提供了详细的测试代码以展示封装效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一章节已经讲了JS定义类的两种方式，并尝试着封装了两个类，这一章节我们来封装两个与页面特效相关的类。第一个是仿jQuery的css方法来操作div的样式，第二个是封装一个table表格对象。

字面量封装css方法

前面已经讲解如何通过字面量来定义对象，下面我们就通过字面量的方式来封装css方法，首先在body标签里面定义一个div

<div id="box"></div>

然后给这个div加上样式

        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

上诉代码的就定义了一个div，并将该div的长宽设置为200px，并且把背景颜色设置为红色，页面效果如图：
在这里插入图片描述
接下来我们定义一个Util工具类，该类具有$()方法和css()方法，$()方法的作用是返回给定id的div对象，而css的作用是设置/获取div对象的属性值。

Util工具类的代码如下：

        var Util = {
            //根据id获取dom节点
            $:function(id) {
                return document.getElementById(id);
            },
            css:function

最低0.47元/天解锁文章