• 先看下面的动图，了解一下本例最后实现的效果。

attr();本身是设置标签属性用的，这里用来设置样式和获取样式。

addClass();这个是追加样式。

removeClass();这是移除样式。

toggleClass();这是切换样式，切换的意思很简单，有就删除，没有就追加。

hasClass();判断样式是否存在。

一、我们先做一个盒子，给它最基本的样式，就是宽和高。

二、忘记了，还要链接jQuery库，我们就连官网的库吧。

三、现在打开网页什么都看不见，我们加个按钮“添加红色背景”，同时也添加一个样式addred。

四、现在可以添加按钮的点击事件了，点击事件先留个空，一步一步来。

五、接下来可以在事件里面放操作了，这里就给box追加样式addred。

六、后面就不啰嗦了，一口气直接再添加三个按钮，三个空的点击事件。

七、先试着去掉背景。

八、忘记了，还要添加一个边框样式togborder。

九、toggleClass()它是有则删，无则加，所以称为切换。

十、hasClass()是判断样式是否存在，这里我们用alert消息框输出结果。

十一、忘记一个方法了，那就是attr()，再加一个按钮，再加一个点击事件。

本文来源于今日头条，落笔承冰原创，下面是源码。

---

 Document添加红色背景 去掉红色背景 切换边框 判断是否存在边框 取得当前box的样式