来来来，开篇点题。

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

重要代码如下

    <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. sonarqube插件开发(二) 开发插件

    一.环境准备 java 1.8, maven 3.1 检查自己的环境是否支持 sonarqube的插件开发 java -version mvn -version 二.创建maven项目 pom.xml ...

  2. Android MediaScanner

    一.MediaScanner 的使用 1)Intent.ACTION_MEDIA_SCANNER_SCAN_FILE:扫描指定文件 public void scanFileAsync(Context ...

  3. 微信小游戏 50M那部分的缓存机制的使用

    一.使用 AssetsManager 灵活定制微信小游戏的缓存策略 官网教程:http://developer.egret.com/cn/github/egret-docs/Engine2D/mini ...

  4. 23种设计模式之组合模式（Composite）

    组合模式又称为整体-部分(Part-whole)模式,属于对象的结构模式.在组合模式中,通过组合多个对象形成树形结构以表示整体-部分的结构层次.组合模式对单个对象(即叶子对象)和组合对象(即容器对象) ...

  5. vim上下左右键输出A B

    (转)vim上下左右键不能用 把下面这段话存到~/.vimrc就可以了. " An example for a vimrc file. " " Maintainer: B ...

  6. 号称简明实用的django上手教程

    1 几个基本概念 前置条件:假设读者基本Python语言基础,或者具备某种编程语言的基础.你还熟悉web开发环境,懂些css,js,db等. Django是什么? Django是一个开放源代码的Web ...

  7. Java--TestNG

    TestNG类的配置信息:  @BeforeSuite:在此套件中的所有测试运行之前,将运行带注释的方法.  @AfterSuite:在此套件中的所有测试运行后,将运行带注释的方法.  @Before ...

  8. Ucloud云主机无法yum安装处理办法

    Ucloud云主机在yum安装的时候出现这个提示 执行一下命令 yum --disablerepo=salttestyum-config-manager --disable salttestyum-c ...

  9. UVA 11776 - Oh Your Royal Greediness! - [贪心/模拟]

    题目链接:https://cn.vjudge.net/problem/UVA-11776 题意: 给出数字n(0<=n<=1000),代表有n个农民,接下来有n行,每行两个数字S和E代表这 ...

  10. 使用Maven导出项目依赖的jar包

    步骤1.进入项目目录(有pom.xml的目录) 2.创建存放导出jar依赖包的目录 3.地址栏输入cmd,回车 4.输入导出命令,回车mvn dependency:copy-dependencies  ...