下面小编就为大家带来一篇 javaScript 给元素添加多个 class 的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
javaScript 给元素添加多个 class 的简单实现
- <html>
- <head>
- <style type="text/CSS">
- .div2{
- font-size:16px;
- color:orange;
- }
- .div3{
- font-size:20px;
- color:blue;
- }
- <style>
- <script type="text/javascript">
- [1]直接把样式赋值给className
- var odiv=document.getElementById('div1');
- odiv.className= div3
- //这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;
- [2]使用累加赋值给className
- var odiv=document.getElementById('div1');
- odiv.className+=" "+div3 //样式和样式之间需要空隙 ,所以加个空字符串隔开
- //这样可以得到 class="div2 div3" 可以正常增加,但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式,如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";
- [3]检测样式原先之前是否有相同的样式
- var odiv=document.getElementById('div1');
- function hasClass(element,csName){
- element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
- }
- [4]在[3]的基础上我们就可以进行判断性给元素添加样式了
- var odiv=document.getElementById('div1');
- function hasClass(element,csName){
- return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
- }
- function addClass(element,csName){
- if(!hasClass(element,csName)){
- element.className+=' '+csName;
- }
- addClass(odiv,'div3');
- //这样就可以灵活给元素添加样式了;
- 【元素删除指定样式】
- //同样先进行判断,在进行删除
- var odiv=document.getElementById('div1');
- function hasClass(element,csName){
- return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
- }
- function deleteClass(element,csName){
- if(!hasClass(element,csName)){
- element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' '); //利用正则捕获到要删除的样式的名称,然后把他替换成一个空白字符串,就相当于删除了
- }
- deleteClass(odiv,div3);
- }
- </script>
- </head>
- <body>
- <div id="div1" class='div2'> 测试</div>
- </body>
- </html>
以上这篇 javaScript 给元素添加多个 class 的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0306/264184.html