当前位置:   article > 正文

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

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. .red{
  18. color: red;
  19. }.fontSize{
  20. font-size: 20px;
  21. }.bold{
  22. font-weight: bold;
  23. }.blue{
  24. color: blue;
  25. }
  26. </style>
  27. <script type="text/javascript">
  28. window.onload = function(){
  29. var btn = document.getElementById("btn");
  30. var content = document.getElementById("content");
  31. var state = 1;
  32. btn.onclick = function(){
  33. if(state == 1){
  34. content.classList.add("red");
  35. state = 11;
  36. }else if(state == 11){
  37. content.classList.add("fontSize","bold");
  38. state = 2;
  39. }else if(state == 2){
  40. content.classList.remove("red");
  41. state = 22;
  42. }else if(state == 22){
  43. content.classList.remove("fontSize","bold");
  44. state = 3;
  45. }else if(state == 3){
  46. content.classList.add("red","fontSize","bold");
  47. alert(content.classList.contains("red"));
  48. state = 4;
  49. }else if(state == 4){
  50. content.classList.replace("red","blue");
  51. state = 5;
  52. }else{
  53. alert(content.classList.item(1));
  54. }
  55. }
  56. }
  57. </script>
  58. </head>
  59. <body>
  60. <div id="btn">按钮</div>
  61. <div id="content">classList属性测试</div>
  62. </body>
  63. </html>

四、浏览器的兼容性

       

 

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

一、添加 setAttribute()

      1、概念

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

  1. 语法:element.setAttribute(name, value)
  2.           - 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. btn1.onclick = function(){
  23. btn1.setAttribute("class","shadow");
  24. }
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <div id="btn1">添加Class样式</div>
  30. </body>
  31. </html>

二、删除 removeAttribute()

      1、概念

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

  1. 语法:element.removeAttribute(name)
  2.           - 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.           - 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. btn1.onclick = function(){
  22. alert(btn1.hasAttribute("class"));
  23. alert(btn1.getAttribute("class"))
  24. }
  25. btn2.onclick = function(){
  26. alert(btn1.hasAttribute("classs"));
  27. alert(btn2.getAttribute("classs"))
  28. }
  29. }
  30. </script>
  31. </head>
  32. <body>
  33. <div id="btn1" class="Test">获取Class名称</div>
  34. <div id="btn2" class="Test">获取Classs名称</div>
  35. </body>
  36. </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. regexp :一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
  5. substr :一个将被 newSubStr 替换的 字符串。其被视为一整个字符串,而不是一个正则表达式。仅第一个匹配项会被替换。
  6. newSubStr :用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
  7. 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. 【第二种】getAttribute
  8. Elemeny.getAttribute('class').indexOf('name');
  9. 【第三种】className
  10. Elemeny.className.indexOf('name');

 

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

闽ICP备14008679号