来来来，开篇点题。

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

重要代码如下

    <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. Instrumentation 两种方法 premain Agent

    由于jvm内部的限制Instrumentation 只能修改方法体 不能动态添加删除方法(安全第一吧!!!!) Premain 对于使用命令行接口的实现,可以将以下选项添加到命令行来启动代理: -ja ...

  2. 【CF845F】Guards In The Storehouse 插头DP

    [CF845F]Guards In The Storehouse 题意:一个n*m的房间,每个格子要么是障碍要么是空地.对于每个空地你可以选择放或者不放守卫.一个守卫能保护到的位置是:他右面的一行空地 ...

  3. JSPatch - 基本使用和学习

    介绍 JSPatch是2015年由bang推出的能实现热修复的工具,只要在项目中引入极小的JSPatch引擎,就可以用 JavaScript 调用和替换任何 Objective-C 的原生方法,获得脚 ...

  4. Xcode - LLDB调试技巧

    LLDB是Xcode默认的调试器,它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.平时用Xcode运行程序,实际走的都是LLDB.熟练使用LLDB,可以让你debug事半功倍. ...

  5. sublime设置tab键为4个空格

    在使用sublime的时候,有时候新建的文件,默认的缩进是2个,那么如何将sublime设置tab键为4个空格呢? 具体方法: 配置: , "translate_tabs_to_spaces ...

  6. pandas将DataFrame的列变成行索引

    pandas提供了set_index方法可以将DataFrame的列(多列)变成行索引,通过reset_index方法可以将层次化索引的级别会被转移到列里面. 1.DataFrame的set_inde ...

  7. nginx map使用方法

    map指令使用ngx_http_map_module模块提供的.默认情况下,nginx有加载这个模块,除非人为的 --without-http_map_module.ngx_http_map_modu ...

  8. compile time - run-time

    php.net Class member variables are called "properties". You may also see them referred to ...

  9. httpd.conf .htaccess apache 服务器配置

    PHP Advanced and Object-Oriented Programming Larry Ullman The standard solution in these situations ...

  10. 2018/03/30 每日一个Linux命令 之 创建用户/密码

    感悟: 感觉每天学习下指令真的很不错,虽然感觉也没啥东西,但是真的用到了,马上就能想起来个大概,忘了详细的用法,就回来看看自己的博客. 话说今天GitHub上有个人 star 了我的项目,很开心,嘎嘎 ...