来来来，开篇点题。

分页应用。当在当前页时，分页的数字有个框之类的。

重要代码如下

    <ul class="pagination">

                        <li><a href="#"><i class="fa fa-angle-left"></i></a></li>

                        <li class="active"><a href="#">1</a></li>

                        <li><a href="#">2</a></li>

                        <li><a href="#">3</a></li>

                        <li><a href="#">4</a></li>

                        <li><a href="#"><i class="fa fa-angle-right"></i></a></li>

                    </ul>

好，问题来了：我们是一个一个修改，添加    【class="active"】吗？如果10可以，那么100个呢？

这里只说如何添加class,不说怎么分类哈。

1 方法

重要代码：                        el.setAttribute('class','blablaba'); 

实例代码

<style type="text/css">

.red {

background: red;

}

</style> 

<div id="d1">test div</div>

<script>

var div = document.getElementById('d1');

div.setAttribute("class", "red");

</script> 
问题：IE6/7 : div背景色不是红色 
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色 
结果：IE6/7不支持setAttribute('class',xxx)方式设置元素的class。 

这个方法不好，那向下看

2.来个几乎万能的way

核心代码：el.className = 'blablabla'; 

<style type="text/css">

.red {

background: red;

}

</style> 

<BODY>

<div id="d1">test div</div>

<script>

var div = document.getElementById('d1');

div.className = 'red';

</script>

利用js添加class的更多相关文章

  1. 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

  2. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  3. JS 数据类型转换-转换函数、强制类型转换、利用js变量弱类型转换

    1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型 ...

  4. JS 添加千分位，测试可以使用

    JS 添加千分位,测试可以使用 <script language="javascript" type="text/javascript">funct ...

  5. 利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  6. 利用JS实现闪烁字体

    以下为在JSP文件中,利用JS实现闪烁字体的代码: HTML代码: <div id="blink">一段会闪烁的字</div> JavaScript代码: ...

  7. 利用JS实现HTML TABLE的分页

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...

  8. 利用js闭包获取索引号

    以tab选项卡效果为例: 网页中的选项卡效果

  9. 利用js制作异步验证ajax方法（）

    如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...

随机推荐

  1. sys.path.insert(0,"/path") 的用法

    可以选择用sys.path.insert(0,‘/path’),这样新添加的目录会优先于其他目录被import检查

  2. [转]Android Path里FillType功能

    对于简单的封闭图形(路径无相交的现象),图形的外部和内部和容易判断,但如果路径有相交的情况,对应重叠的部分,使用不同的填充模式,内部和外部的定义有所不同.填充模式可以分为两类: EVEN_ODD 意味 ...

  3. 选择排序之python

    选择排序( Selection sort) 1.算法描述: 通过n-i次关键字之间的比较,从n-i+1个记录中选出关键字最小的记录,并和第i(1<=i<=n)个记录进行交换. 对尚未完成排 ...

  4. linux：echo命令示例

    echo命令:用于字符串的输出  $echo string 1.打印普通字符串 $echo "hello kumata" hello kumata #这里的双引号完全可以省略,以下 ...

  5. php.exe

    PhpStorm 10.0.2 php  interpreter  填入php.exe 暂且不用填写 Listen 63342

  6. little_rockie

    https://www.cnblogs.com/nxld/p/6058591.html

  7. elasticsearch的重启

    没有重启的操作,只有关闭了再启动的操作. ps -ef | grep elastic e表示全部的进程,f表示展示进程间的相关关系,如父子进程. 然后找到你启动es的那个账号,不是root,一般是新建 ...

  8. 洛谷P2414 阿狸的打字机 [NOI2011] AC自动机+树状数组/线段树

    正解:AC自动机+树状数组/线段树 解题报告: 传送门! 这道题,首先想到暴力思路还是不难的,首先看到y有那么多个,菜鸡如我还不怎么会可持久化之类的,那就直接排个序什么的然后按顺序做就好,这样听说有7 ...

  9. Elasticsearch 的坑爹事——记录一次mapping field修改过程（转）

    原文:http://www.cnblogs.com/Creator/p/3722408.html 本文记录一次Elasticsearch mapping field修改过程 团队使用Elasticse ...

  10. if判断代码 转变为 流程图

    转换规则如下: if 代表一个菱形+问号 if后面的条件代表菱形里的内容+↓yes(向下箭头和yes) if同级的else代表右拐向下箭头和no 执行语句块代表一个矩形. if 今天发工资: 先还信用 ...