来来来，开篇点题。

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

重要代码如下

    <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. 谷歌浏览器不能正常显示中文，chrome显示汉字问题

    用了几年的 chrome但是最近每次升级完flash就出现页面不能正常显示中文的现象. 在一个论坛上发现了处理办法如下: 1. 在谷歌浏览器的地址栏输入 chrome://flags/ 2. 在设置里 ...

  2. 关于javaagent拦截不到File类的问题

    main类: Java code   ? 1 2 3 4 public static void main(String[] args) {         File file = new File(& ...

  3. 【CF700E】Cool Slogans 后缀自动机+线段树合并

    [CF700E]Cool Slogans 题意:给你一个字符串S,求一个最长的字符串序列$s_1,s_2,...,s_k$,满足$\forall s_i$是S的子串,且$s_i$在$s_{i-1}$里 ...

  4. mysql概要（二）类型（数值型，字符型，时间类型

    1.mysql数值型范围 tinyint可选属性 tinyint(N) unsigned zerofill N:表示显示长度,与zerofill配合使用,即长度不够用0填充,并且自动变成无符号的数,N ...

  5. Unity3D笔记十五 碰撞、移动

    碰撞 Collision. [kəˈliʒən] 碰撞:冲突:(意见,看法)的抵触:(政党等的)倾轧 选择一个需要添加碰撞器的游戏对象后 Component->Physics- Unity一共为 ...

  6. 常见的几个js疑难点，match，charAt，charCodeAt，map，search

            JavaScript match() 方法 定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastI ...

  7. 9.21 form 和Ajax详解

    form 表单 参考连接  : http://www.cnblogs.com/liwenzhou/p/8747872.html

  8. Chrome V8引擎的一点认识

    最近在玩弄JavaScript ,也一直在捉摸,脚本Engine怎么解析你写的Code,对Google兴趣浓,索性就看了谷歌的脚本engine的官方资料,都是E文的,但是却是最纯的不是,看下来总结V8 ...

  9. NEFU 84 - 五指山 - [exgcd求解一元线性同余方程]

    题目链接:http://acm.nefu.edu.cn/JudgeOnline/problemShow.php?problem_id=84 Time Limit:1000ms Memory Limit ...

  10. PyQT5-QSlide滑块

    """ QSlider:是一个小滑块组件,这个小滑块能够被拖着一起滑动,用于通常修改具有一定范围的数据 Author: dengyexun DateTime: 2018. ...