如何用javascript为元素添加class
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用javascript为元素添加class相关的知识，希望对你有一定的参考价值。
以给 body 标签添加 class 为例
通过 jQuery
$( 'body').addClass( 'class1 class2' );$( 'body' ).removeClass( 'class1 class2' );
支持 classList 的高级浏览器（IE10+，Chrome，Firefox，Safari）
document.body.classList.add( 'class1', 'class2' );document.body.classList.remove( 'class1', 'class2' );
不支持 classList 的浏览器只能通过 className 来添加
document.body.className += ' class1 class2' 参考技术A以给 body 标签添加 class 为例
通过 jQuery
$( 'body').addClass( 'class1 class2' );
$( 'body' ).removeClass( 'class1 class2' );
支持 classList 的高级浏览器（IE10+，Chrome，Firefox，Safari）
document.body.classList.add( 'class1', 'class2' );
document.body.classList.remove( 'class1', 'class2' );
不支持 classList 的浏览器只能通过 className 来添加
document.body.className += ' cl
[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;
document.getElementById('test').classList.add('myClass');
兼容写法：
document.getElementById('test').className += ' myClass';
如何用JavaScript去操作HTML元素和CSS样式
第3章 你也有控制权（DOM操作）
如何用JavaScript去操作HTML元素和CSS样式，实现简单的动态操作。
- 3-1 认识DOM
- 3-2 通过ID获取元素
- 3-3 innerHTML 属性
- 3-4 改变 HTML 样式
- 3-5 显示和隐藏（display属性）
- 3-6 控制类名（className 属性）
第4章 编程挑战
不断实践，提高技能。
- 4-1 编程挑战
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>认识DOM</title> 6 </head> 7 <body> 8 <p>HTML文档可以说由节点构成的集合，三种常见的DOM节点:</p> 9 <ol> 10 <li>元素节点：<html>、<body>、<p>等都是元素节点，即标签。如图一</li> 11 <li>文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。</li> 12 <li>属性节点:元素属性，如<a>标签的链接属性href="http://www.dhnblog.com/"。如图二</li> 13 </ol> 14 <p><img src="images/demo3-1-1.jpg" title="图一"></p> 15 <p><img src="images/demo3-1-2.jpg" title="图二"></p> 16 </body> 17 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>通过ID获取元素</title> 6 </head> 7 <body> 8 <h3>hello</h3> 9 <p id=‘con‘>i love javascript</p> 10 <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p> 11 <script> 12 // document.getElementById("id") 13 var mystr=document.getElementById(‘con‘); 14 document.write(mystr); 15 /* 16 object HTMLParagraphElement 对象 HTML段落元素，获取到的是元素，这个元素也就是对象， 17 获取到的对象不会显示里面的值，所以显示object HTMLParagraphElement，想要抽取出里面的值，就用 innerHTML 获取 18 获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。 19 */ 20 </script> 21 </body> 22 </html>
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>innerHTML 属性</title> 6 <!-- <script type="text/javascript"> 7 // Object.innerHTML//语法 8 var mycon=document.getElementById(‘con‘); 9 document.write(‘P标签原始内容:‘+mycon.innerHTML+‘<br >‘); 10 mycon.innerHTML="今天阳光明媚"; 11 document.write(‘P标签现在内容:‘+mycon.innerHTML+‘<br >‘); 12 </script> --> 13 </head> 14 <body> 15 <p id="con">你好4月份</p> 16 <p>当js写在这个头部，报错Uncaught TypeError: Cannot read property ‘innerHTML‘ of null</p> 17 <!-- 浏览器截图效果展示 --> 18 <p><img src="images/demo3-3-1.jpg" ></p> 19 <p><img src="images/demo3-3-2.jpg" ></p> 20 </body> 21 22 <script type="text/javascript"> 23 // Object.innerHTML//语法 24 var mycon=document.getElementById(‘con‘); 25 document.write(‘P标签原始内容:‘+mycon.innerHTML+‘<br >‘); 26 mycon.innerHTML="今天阳光明媚"; 27 document.write(‘P标签现在内容:‘+mycon.innerHTML+‘<br >‘); 28 </script> 29 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>改变 HTML 样式</title> 6 <script type="text/javascript"> 7 // Object.style.property=new style; 8 // Object是获取的元素对象，如通过document.getElementById("id")获取的元素。 9 // property属性 10 </script> 11 </head> 12 <body> 13 <p id="con">hello world</p> 14 <script type="text/javascript"> 15 var mycon=document.getElementById(‘con‘); 16 mycon.style.color=‘#fff‘; 17 mycon.style.fontSize=‘18px‘; 18 mycon.style.backgroundColor=‘green‘; 19 </script> 20 <p>基本属性表（property）:</p> 21 <img src="images/demo3-4-1.jpg" > 22 <img src="images/demo3-4-2.jpg" > 23 </body> 24 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>显示和隐藏（display属性）</title> 6 </head> 7 <body> 8 <p id="ceshi">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 9 <script type="text/javascript"> 10 // Object.style.display = value 11 var ceshi=document.getElementById(‘ceshi‘); 12 function ceshi1(){ 13 ceshi.style.display=‘none‘; 14 } 15 function ceshi2(){ 16 ceshi.style.display=‘block‘; 17 } 18 </script> 19 <form action="" method=""> 20 <input type="button" name="" id="" value="显示内容" onclick="ceshi2()"/> 21 <input type="button" name="" id="" value="隐藏内容" onclick="ceshi1()"/> 22 </form> 23 <p>value取值:</p> 24 <img src="images/demo3-5-1.jpg" > 25 <p>代码展示:</p> 26 <img src="images/demo3-5-2.jpg" > 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>控制类名（className 属性）</title> 6 <script type="text/javascript"> 7 /*object.className = classname 8 1.获取元素的class 属性 9 2. 为网页内的某个元素指定一个css样式来更改该元素的外观*/ 10 </script> 11 <style type="text/css"> 12 .mychang{ 13 color: #fff; 14 background-color: #f90; 15 height: 60px; 16 width: 80%; 17 line-height: 60px; 18 font-size: 16px; 19 } 20 .ceshi{ 21 font-size: 18px; 22 color: #008000; 23 } 24 </style> 25 </head> 26 <body> 27 <p id="add"> JavaScript使网页显示动态效果并实现与用户交互功能</p> 28 <input type="button" name="" id="" value="添加样式" onclick="myadd()"/> 29 <h3 id="change" class="one">JavaScript使网页显示动态效果并实现与用户交互功能</h3> 30 <input type="button" name="" id="" value="更改外观" onclick="mychange()"/> 31 <script type="text/javascript"> 32 function myadd(){ 33 document.getElementById(‘add‘).className=‘ceshi‘ 34 } 35 function mychange(){ 36 document.getElementById(‘change‘).className=‘mychang‘; 37 } 38 </script> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>控制类名（className 属性）补充</title> 6 <style type="text/css"> 7 .one{ 8 font-size: 14px; 9 width: 200px; 10 color: red; 11 } 12 .two{ 13 font-size: 20px; 14 width: 400px; 15 color: green; 16 } 17 </style> 18 </head> 19 <body> 20 <p id="str" class="one">郁闷,又丢了U盘</p> 21 <form action="" method=""> 22 <input type="button" name="" id="" value="点击更改" onclick="modifyclass()"/> 23 </form> 24 <script type="text/javascript"> 25 var mystr=document.getElementById(‘str‘); 26 document.write(‘p元素的class值为:‘+mystr.className+‘<br />‘) 27 function modifyclass(){ 28 mystr.className=‘two‘ 29 } 30 </script> 31 <p>代码展示:</p> 32 <img src="images/demo3-6-1.jpg" > 33 <img src="images/demo3-6-2.jpg" > 34 </body> 35 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" /> 5 <title>style样式</title> 6 <style type="text/css"> 7 *{ font-size:12px;} 8 #txt{ 9 height:400px; 10 width:600px; 11 border:#333 solid 1px; 12 padding:5px; 13 14 } 15 p{ 16 line-height:18px; 17 text-indent:2em;} 18 </style> 19 </head> 20 <body> 21 <h2 id="con">JavaScript课程</H2> 22 <div id="txt"> 23 <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> 24 <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p> 25 <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> 26 <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> 27 28 </div> 29 <form> 30 <input type="button" value="改变颜色" onClick="dcolor()"> 31 <input type="button" value="改变宽高" onClick="dwh()"> 32 <input type="button" value="隐藏内容" onClick="dh()"> 33 <input type="button" value="显示内容" onClick="ds()"> 34 <input type="button" value="恢复" onClick="dclear()"> 35 36 </form> 37 <script type="text/javascript"> 38 function dcolor(){ 39 var mychar = document.getElementById("txt"); 40 mychar.style.color="red"; 41 mychar.style.backgroundColor="#ccc"; 42 } 43 44 function dwh(){ 45 var mychar = document.getElementById("txt"); 46 mychar.style.width="400px"; 47 mychar.style.height="200px"; 48 } 49 50 function dh(){ 51 var mychar = document.getElementById("txt"); 52 mychar.style.display="none"; 53 } 54 55 function dclear(){ 56 if(confirm("确定要取消设置吗?")){ 57 var mychar = document.getElementById("txt"); 58 mychar.style.color="#000"; 59 mychar.style.backgroundColor="#fff"; 60 mychar.style.width="600px"; 61 mychar.style.height="400px"; 62 mychar.style.display="block"; 63 } 64 } 65 function ds(){ 66 var mychar = document.getElementById("txt"); 67 mychar.style.display="block"; 68 } 69 </script> 70 </body> 71 72 </html>
以上是关于如何用javascript为元素添加class的主要内容，如果未能解决你的问题，请参考以下文章