devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript对Html元素的Class操作 - className、classList、Attribute_javascript操作classname

作者：2023面试高手 | 2024-02-12 21:21:23

赞

踩

javascript操作classname

目录

【1】DOM对象 className属性对类的操作

【2】DOM对象 classList属性对类的操作

        - 添加 add( String [, String] ) 

               - 删除 remove( String [,String] )

               - 查询 contains( String )

               - 替换 replace( oldClass, newClass ) 

               - 索引查询 item ( Number )

【3】DOM对象 Attribute()方法对类的操作

         -  添加 setAttribute()

         - 删除 removeAttribute()

         - 查询 getAttribute()

【4】兼容式       

【1】DOM对象 className属性对类的操作

一、概念

className 获取或设置指定元素的class属性的值。

1、获取属性值：Element.className

2、设置属性值：Element.className = classname

注意：使用名称className而不是class作为属性名，是因为"class" 在JavaScript中是个保留字。

 

二、效果

       

 

三、代码

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>测试页面</title>
  6. 		<style type="text/css">
  7. 			#btn{
  8. 				padding: 5px 15px;
  9. 				background-color: #20BDFF;
  10. 				width: 50px;
  11. 				text-align: center;
  12. 				color: white;
  13. 				border-radius: 2px;
  14. 				cursor: pointer;
  15. 			}
  16. 		</style>
  17. 		<script type="text/javascript">
  18. 			window.onload = function(){
  19. 				var btn = document.getElementById("btn");
  20. 				btn.onclick = function(){
  21. 					alert(btn.className);
  22. 					btn.className = "Hello";
  23. 				}
  24. 			}
  25. 		</script>
  26. 	</head>
  27. 	<body>
  28. 		<div id="btn" class="Test">按钮</div>
  29. 	</body>
  30. </html>

 

【2】DOM对象 classList属性对类的操作

一、概念

Element.classList 是一个只读属性，返回一个元素的类属性的实时DOMTokenList 集合。

使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法。

1、添加 add( String [, String] )

      添加指定的类值。

      - 添加一个类：Element.classList.add("className1");

      - 添加多个类：Element.classList.add("className1","className2");

2、删除 remove( String [,String] )

      删除指定的类值，如果指定的类不存在，则不执行任何操作。

      - 删除一个类：Element.classList.remove("className1");

      - 删除多个类：Element.classList.remove("className1","className2");

3、查询 contains( String )

      检查元素的类属性中是否存在指定的类，其返回值为true或者false。

      - 查询指定的类：Element.classList.contains("className1");

4、替换 replace( oldClass, newClass )

      用一个新类替换已有类，如果指定的类不存在，则不执行任何操作。

      - 替换成指定类：Element.classList.replace("oldClass","newClass");

5、索引查询 item ( Number )

      按集合中的索引返回类值。

 

二、效果

       

 

三、代码

  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8">
  4. 		<title>测试页面</title>
  5. 		<style type="text/css">
  6. 			#btn{
  7. 				padding: 5px 15px;
  8. 				background-color: #20BDFF;
  9. 				width: 50px;
  10. 				text-align: center;
  11. 				color: white;
  12. 				border-radius: 2px;
  13. 				cursor: pointer;
  14. 			}#content{
  15. 				padding: 15px 15px;
  16. 			}
  17. 			
  18. 			.red{
  19. 				color: red;
  20. 			}.fontSize{
  21. 				font-size: 20px;
  22. 			}.bold{
  23. 				font-weight: bold;
  24. 			}.blue{
  25. 				color: blue;
  26. 			}
  27. 		</style>
  28. 		<script type="text/javascript">
  29. 			window.onload = function(){
  30. 				var btn = document.getElementById("btn");
  31. 				var content = document.getElementById("content");
  32. 				var state = 1;
  33. 				btn.onclick = function(){
  34. 					if(state == 1){
  35. 						content.classList.add("red");
  36. 						state = 11;
  37. 					}else if(state == 11){
  38. 						content.classList.add("fontSize","bold");
  39. 						state = 2;
  40. 					}else if(state == 2){
  41. 						content.classList.remove("red");
  42. 						state = 22;
  43. 					}else if(state == 22){
  44. 						content.classList.remove("fontSize","bold");
  45. 						state = 3;
  46. 					}else if(state == 3){
  47. 						content.classList.add("red","fontSize","bold");
  48. 						alert(content.classList.contains("red"));
  49. 						state = 4;
  50. 					}else if(state == 4){
  51. 						content.classList.replace("red","blue");
  52. 						state = 5;
  53. 					}else{
  54. 						alert(content.classList.item(1));
  55. 					}
  56. 				}
  57. 			}
  58. 		</script>
  59. 	</head>
  60. 	<body>
  61. 		<div id="btn">按钮</div>
  62. 		<div id="content">classList属性测试</div>
  63. 	</body>
  64. </html>

四、浏览器的兼容性

       

 

【3】DOM对象 Attribute()方法对类的操作

一、添加 setAttribute()

      1、概念

setAttribute() 方法添加指定的属性，并为其赋指定的值。如果属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值。

  1.     语法：element.setAttribute(name, value)
  2.  
  3.           - name表示属性名称，value是该属性的新值

注意：尽管对于不存在的属性，getAttribute() 返回 null，但还是应该使用 removeAttribute() 代替 setAttribute(attr, null) 来删除属性。

      2、效果

      3、代码

  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8">
  4. 		<title>测试页面</title>
  5. 		<style type="text/css">
  6. 			#btn1,#btn2{
  7. 				padding: 10px 15px;
  8. 				background-color: #20BDFF;
  9. 				width: 120px;
  10. 				text-align: center;
  11. 				color: white;
  12. 				border-radius: 2px;
  13. 				cursor: pointer;
  14. 				margin: 5px;
  15. 			}.shadow{
  16. 				box-shadow: 0px 0px 10px blue;
  17. 			}
  18. 		</style>
  19. 		<script type="text/javascript">
  20. 			window.onload = function(){
  21. 				var btn1 = document.getElementById("btn1");
  22. 				
  23. 				btn1.onclick = function(){
  24. 					btn1.setAttribute("class","shadow");
  25. 				}
  26. 			}
  27. 		</script>
  28. 	</head>
  29. 	<body>
  30. 		<div id="btn1">添加Class样式</div>
  31. 	</body>
  32. </html>

二、删除 removeAttribute()

      1、概念

removeAttribute() 方法删除指定的属性。

  1.     语法：element.removeAttribute(name)
  2.  
  3.           - name表示属性名称

此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。

      2、效果

 

      3、代码

  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8">
  4. 		<title>测试页面</title>
  5. 		<style type="text/css">
  6. 			#btn1{
  7. 				padding: 10px 15px;
  8. 				background-color: #20BDFF;
  9. 				width: 140px;
  10. 				text-align: center;
  11. 				color: white;
  12. 				border-radius: 2px;
  13. 				cursor: pointer;
  14. 				margin: 5px;
  15. 			}.shadow{
  16. 				box-shadow: 0px 0px 10px blue;
  17. 			}
  18. 		</style>
  19. 		<script type="text/javascript">
  20. 			window.onload = function(){
  21. 				var btn1 = document.getElementById("btn1");
  22. 				btn1.onclick = function(){
  23. 					btn1.removeAttribute("class");
  24. 				}
  25. 			}
  26. 		</script>
  27. 	</head>
  28. 	<body>
  29. 		<div id="btn1" class="shadow">添加/替换Class样式</div>
  30. 	</body>
  31. </html>

 

三、查询 getAttribute()

      1、概念

getAttribute() 方法返回指定属性名的属性值，如果指定的属性不存在，则返回 null 或 " "（空字符串）。

  1.     语法：element.getAttribute(name)
  2.  
  3.           - name表示获取属性的名称

注意：当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时，getAttribute() 会先将其参数转换为小写形式。当指定的属性不存在于元素上时，所有浏览器（Firefox、Internet Explorer、Opera 最新版本、Safari、Konqueror 以及 iCab 等等）都返回 null，这也是当前 DOM 规范草案规定的。然而，旧的DOM 3 Core specification 认为此时正确的返回值应该是一个空字符串，一些 DOM 实现环境实现了该行为（behavior）。在 XUL (Gecko) 中，getAttribute 的实现遵从 DOM 3 Core specification，返回一个空字符串。因此，如果一个属性可能不存在于指定的元素上，在调用 getAttribute() 之前，你应该使用 element.hasAttribute() 来检测该属性是否存在。

      2、效果

 

      3、代码

  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8">
  4. 		<title>测试页面</title>
  5. 		<style type="text/css">
  6. 			#btn1,#btn2{
  7. 				padding: 10px 15px;
  8. 				background-color: #20BDFF;
  9. 				width: 120px;
  10. 				text-align: center;
  11. 				color: white;
  12. 				border-radius: 2px;
  13. 				cursor: pointer;
  14. 				margin: 5px;
  15. 			}
  16. 		</style>
  17. 		<script type="text/javascript">
  18. 			window.onload = function(){
  19. 				var btn1 = document.getElementById("btn1");
  20. 				var btn2 = document.getElementById("btn2");
  21. 				
  22. 				btn1.onclick = function(){
  23. 					alert(btn1.hasAttribute("class"));
  24. 					alert(btn1.getAttribute("class"))
  25. 				}
  26. 				btn2.onclick = function(){
  27. 					alert(btn1.hasAttribute("classs"));
  28. 					alert(btn2.getAttribute("classs"))
  29. 				}
  30. 			}
  31. 		</script>
  32. 	</head>
  33. 	<body>
  34. 		<div id="btn1" class="Test">获取Class名称</div>
  35. 		<div id="btn2" class="Test">获取Classs名称</div>
  36. 	</body>
  37. </html>

【四】兼容式       

      1、概念

            如果不考虑兼容IE10以下的话，可以用HTML5中的classList API，非常方便，兼容的方式是采用className属性和Attribute()方法，但要注意的是className属性和Attribute()方法在操作时针对的是整个属性字符串的，无法判断多个类中是否存在某个类。

      2、操作

            -- 删除/替换：replace()

              该方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的函数。 原字符串不会改变。

  1. 语法：String.replace(regexp | substr ，newSubStr | function)
  2.                       （ pattern ）     （ replacement ）
  3.  
  4. 参数
  5. regexp ：一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
  6. substr ：一个将被 newSubStr 替换的 字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。
  7.  
  8. newSubStr ：用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
  9. function ：一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。

            -- 查询：indexOf()

              对于这种情况，我们可以自己写一个遍历函数对整个属性字符串中的字符一一匹配，或者通过indexOf()方法，来判断具体类中在整个属性字符串数组中的索引，如果不存在，则返回-1。例如:

  1. 【第一种】普通数组
  2. var List= ['one', 'two', 'three', 'four', 'five'] ;
  3. console.log(List.indexOf（"three")) ;
  4. // 输出为: 2
  5. console.log(List.indexOf（"six")) ;
  6. // 输出为: -1
  7.  
  8. 【第二种】getAttribute
  9. Elemeny.getAttribute('class').indexOf('name')；
  10.  
  11. 【第三种】className
  12. Elemeny.className.indexOf('name')；

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/78700
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号