来来来，开篇点题。

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

重要代码如下

    <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. 基于spring-cloud的微服务(2) eureka服务提供方的注册和消费方的消费

    启动Eureka注册中心之后,服务提供方就可以注册到Eureka上去(作为一个Eureka的客户端) 我们使用IDEA提供的spring initializer来新建一个springcloud项目 填 ...

  2. 关于 Java 泛型的一些有趣的例子

    有以下的代码: try { ArrayList<String> lstA = new ArrayList<String>(); ArrayList<Integer> ...

  3. 洛谷P2216 理想的正方形

    题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...

  4. Eigen中的基本函数 及其对应的matlab函数

    原文地址C++矩阵库 Eigen 快速入门 不仅有函数的基本形式,还有对应的matlab函数,用起来很方便. Eigen 矩阵定义 #include <Eigen/Dense> Matri ...

  5. linux：任务计划crontab

    crontab 简介 crontab 命令常见于 Unix 和类 Unix 的操作系统之中(Linux 就属于类 Unix 操作系统),用于设置周期性被执行的指令. crontab 命令从输入设备读取 ...

  6. android udev

    http://www.freesoftwaremagazine.com/articles/drivers_linux http://blog.csdn.net/jianchi88/article/de ...

  7. 学习计划 mysql 引擎

    -- 什么是引擎? 按照我现在的勒戒,就可以提供 Mysql 对不同表的处理方式,各有优缺点. 就像名字一样,把我们数据库看成法拉利的话,引擎也就是发送机,有的跑的快,有的距离长....... -- ...

  8. 洛谷P3806 点分治1 & POJ1741 Tree & CF161D Distance in Tree

    正解:点分治 解题报告: 传送门1! 传送门2! 传送门3! 点分治板子有点多,,,分开写题解的话就显得很空旷,不写又不太好毕竟初学还是要多写下题解便于理解 于是灵巧发挥压行选手习惯,开始压题解(bu ...

  9. servlet输出请求头

    1.参考 Enumeration headerNames = req.getHeaderNames(); while(headerNames.hasMoreElements()) { String h ...

  10. 【Jmeter】如何通过文件导入方式对用户名和密码进行参数化设置

    JMeter 参数化 注意:param和data body只能用一个.所有任何一个里面有内容,切换都会报错,这不是问题,jmeter是这么设计的 方法一:通过添加CSV Data Set Config ...