Guest User

exemple-code-js-design

a guest
Feb 25th, 2020
137
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.  
  8.    
  9. </head>
  10.  
  11.     <style>
  12.         .green {
  13.             color: darkgreen;
  14.         }
  15.  
  16.         .orange {
  17.             color: orangered;
  18.         }
  19.         .blue {
  20.             color: blueviolet;
  21.         }
  22.         .yellow {
  23.             color: yellow;
  24.         }
  25.  
  26.         .big {
  27.             font-size: 5em;
  28.         }
  29.     </style>
  30. <body>
  31.    
  32.     <h1 id="my-title" class="green">Carotte</h1>
  33.    
  34.     <div class="articles">
  35.         <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
  36.         <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
  37.         <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
  38.         <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
  39.     </div>
  40.    
  41.     <a href="#">Clique ici</a>
  42.  
  43.     <div class="article">
  44.         <h1>Mon article de blog</h1>
  45.     </div>
  46.  
  47.     <script>
  48.         let title = document.getElementById('my-title');
  49.  
  50.         let paragraph = document.getElementsByClassName('paragraph');  
  51.  
  52.         let link = document.getElementsByTagName('a');
  53.  
  54.         console.log(title);
  55.         console.log(paragraph[2]);
  56.         console.log(link);
  57.  
  58.         let pQuerySelector = document.querySelector('p.paragraph');
  59.         console.log(pQuerySelector);
  60.  
  61.         let pQuerySelectorAll = document.querySelector('.article h1');
  62.         console.log(pQuerySelectorAll);
  63.  
  64.         let article = document.querySelector('.article');
  65.         console.log(article);
  66.  
  67.         pQuerySelector.innerText = 'Je modifie le DOM'
  68.  
  69.         /*
  70.         Modification de classes
  71.         */
  72.        
  73.         let myElement = document.getElementById('my-title');
  74.         console.log('my-title', myElement.className);
  75.  
  76.         //let color = prompt('Quelle couleur ?')
  77.         myElement.classList.add('orange');
  78.         myElement.classList.remove('green');
  79.  
  80.         myElement.classList.toggle('big');
  81.  
  82.         let paragraphElement = document.querySelector('.articles');
  83.         console.log(paragraphElement.lastChild)
  84.        
  85.  
  86.     </script>
  87. </body>
  88. </html>
RAW Paste Data