来来来，开篇点题。

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

重要代码如下

    <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. C# 批量上传

    完整例子下载 效果: 前台: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="d ...

  2. Unity3D 面试三 ABCDE

    说说AB两次面试: “金三银四” 三月份末又面试过两家:共和新路2989弄1号1001这家找了我半天,哇好漂亮的办公大楼!问了保安才知道,这个地址是小区地址.另一家也是创业公司面试我的自称是在腾讯做过 ...

  3. HTML display:inline-block

    元素转换 display:block;   行内转块 Display:inline;   块转行内 Display:inline-block;  块或行内转行内块 链接伪类 a:link{属性:值;} ...

  4. html如何引用另一个html的内容

    第一种:使用jquery: https://api.jquery.com/load/ 这可以加载html中某个id的元素 $( "#result" ).load( "aj ...

  5. MYSQL中GROUP BY不包含所有的非聚合字段时的注意事项

    本文导读:在MYSQL中使用GROUP BY分组时,我们可以select 多个非聚合字段,但是这些字段不在GROUP BY中,这样的SQL查询在SQL SERVER.ORACLE中是不合理的,且会报错 ...

  6. OpenCV学习笔记之课后习题练习2-3

    3.使用例2-10中的视频捕捉和存储方法,结合例2-5中的doPyrDown()创建一个程序,使其从摄像机读入视频数据并将缩放变换后的彩色图像存入磁盘. 例2-10中所用的方法虽然能正常运行,但却不能 ...

  7. 【紫书】【重要】Not so Mobile UVA - 839 递归得漂亮

    题意:判断某个天平是否平衡,输入以递归方式给出. 题解:递归着输入,顺便将当前质量作为 &参数 维护一下,顺便再把是否平衡作为返回值传回去. 坑:最后一行不能多回车 附:天秀代码 #defin ...

  8. cordova 跨平台APP版本升级

    利用cordova+ionic开发好项目,之后就是打包发布,在这之前,还要做一个版本升级的小功能. 首先我们项目根目录里自然少不了配置:config.xml中 如图.version,我们以后每次升级A ...

  9. python脚本中为什么要在目录前加一个r

    目的:为了避免转义,r后面的内容,全文输出: r是保持字符串原始值的意思,就是说不对其中的符号进行转义.因为windows下的目录字符串中通常有斜杠"\",比如,windows下的 ...

  10. redis 数据迁移

    最近有个项目因为要搬迁服务器的原因,去找了服务器公司的运维,需要收费,于是果断决定自己实现这个功能.现在百度上已经一大把redis数据库迁移的教程,大部分是利用主从复制或者利用redis的RDB备份之 ...