JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<html>
  <head>
  
      
      </head>
  <body>
      <button onclick="changeStyleDiv()">Изменить стили</a></button> <!-- через кнопку вызываем функцию changeStyleDiv() -->
      <div id='targetDiv' >Изменим стиль этого элемента</div>    <!-- блок с айди targetDiv  -->
      
      
       <script>
           function changeStyleDiv(){
              document.getElementById('targetDiv').style.border = '1px solid red';  <!-- обращаемся к блоку targetDiv и задаём ему стиль -->
              document.getElementById('targetDiv').style.color = 'green';  <!-- обращаемся к блоку targetDiv и задаём ему стиль -->
              document.getElementById('targetDiv').style.marginLeft = '50px' ;  <!-- обращаемся к блоку targetDiv и задаём ему стиль -->
           }
      </script>
      
      
   </body>
</html>

CSS

#targetDiv{
  transition: 0.5s;
}