Advertisement
1xptolevitico69

JAVASCRIPT Add/Remove class

Jan 20th, 2022
1,098
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>JAVASCRIPT Add/Remove class</title>
  9.   <style>
  10.  
  11.     .tube {
  12.       position: absolute;
  13.       top: 10px;
  14.       right: 10px;
  15.       background-color: red;
  16.       text-decoration: none;
  17.       text-align: center;
  18.       color: snow;
  19.       font-family: arial black;
  20.       padding: 5px 20px;
  21.     }
  22.  
  23.     .divDefault {
  24.       border: 5px solid red;
  25.       padding: 10px;
  26.       background-color: green;
  27.       color: snow;
  28.       display: inline-block;
  29.       font-size: 20px;
  30.       font-family: arial black;
  31.       cursor: context-menu;
  32.     }
  33.  
  34.     .divNewClass {
  35.       padding: 10px 50px;
  36.       background-color: red;
  37.       color: snow;
  38.       display: inline-block;
  39.       font-size: 50px;
  40.       font-family: arial black;
  41.       cursor: pointer;
  42.     }
  43.   </style>
  44. </head>
  45.  
  46. <body>
  47.  
  48.   <div onclick='changeDefault()' class="divDefault">I am a DIV element</div>
  49.  
  50.   <a class='tube'  href='https://www.youtube.com/channel/UCBlokmaN0qO2Y_JIX77UFzg'  target='_blank'>YouTube</a>
  51.  
  52.   <script>
  53.     x = document.getElementsByClassName("divDefault")[0];
  54.     toggle = true;
  55.  
  56.     function changeDefault() {
  57.       if (toggle) {
  58.         x.classList.add("divNewClass");
  59.         x.innerHTML = 'This is the new me!';
  60.         toggle = false;
  61.       } else if (toggle == false) {
  62.         x.classList.remove("divNewClass");
  63.         x.innerHTML = 'I am a DIV element';
  64.         toggle = true;
  65.       }
  66.     }
  67.   </script>
  68. </body>
  69.  
  70. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement