Jak zmieniać w czasie rzeczywistym display

pytanie zadane 9 grudnia 2021 w JavaScript przez SlagEdit Początkujący (380 p.)

Mam pewnego diva, i po jego kliknięciu chcę by inny div zmienił display z none na relativ. Jak coś takiego zrobić?

2 odpowiedzi

odpowiedź 9 grudnia 2021 przez qax Dyskutant (8,060 p.)

Po pierwsze właściwość CSS display odpowiada za pokazywanie/ukrywanie elementu HTML, po drugie relative to wartość właściwości CSS o nazwie position, tak więc obie te cechy to całkiem różne rzeczy. Możesz na przykład za pomocą JS zmienić display z none na block (lub inline lub inline-block) i na odwrót. Natomiast position możesz zmienić ze static na relative (lub absolute) i vice versa.

Zakładając, że mamy takie kod HTML:

<div id="button">Kliknij mnie</div>
<div id="change">Zmieniam się</div>

Kod JavaScript pokazujący i ukrywający drugiego diva:

let buttonDiv = document.getElementById('button');
let changeDiv = document.getElementById('change');

buttonDiv.addEventListener('click', function() {
	if (changeDiv.style.display != 'none') {
		changeDiv.style.display = 'none';
   } else {
   	changeDiv.style.display = 'block';
   }
});

Kod JavaScript przełączający pozycjonowanie drugiego diva:

let buttonDiv = document.getElementById('button');
let changeDiv = document.getElementById('change');

buttonDiv.addEventListener('click', function() {
	if (changeDiv.style.position != 'relative') {
		changeDiv.style.position = 'relative';
   } else {
   	changeDiv.style.position = 'static';
   }
});

komentarz 9 grudnia 2021 przez SlagEdit Początkujący (380 p.)

Faktycznie pomyliłem position z display, zastosuje ten kod co pokazałeś. Dzięki wielkie

komentarz 9 grudnia 2021 przez SlagEdit Początkujący (380 p.)

Zmieniłem i dalej nie działa

var wpisane="";
    function nowywpis() {
    				var pwpis="<div class=\"wpis\" style=\"background-color:";
    				
    var kolor=document.getElementById("kolorek").value
    var kpwpis=";\">";
    var tresc=document.getElementById("tresci").value
    var kwpis="</div><br>"
    
    if(tresci.length==0){}else{
  var wynik=(pwpis + kolor + kpwpis + tresc + kwpis);
  wpisane=wpisane+wynik
 document.getElementById("wpisy").innerHTML = wpisane;
  var tresc=document.getElementById("tresci").value=""
  }
    
    
    
 
}
let buttonDiv = document.getElementById('button');
let changeDiv = document.getElementById('change');
 
buttonDiv.addEventListener('click', function() {
    if (changeDiv.style.display != 'none') {
        changeDiv.style.display = 'none';
   } else {
    changeDiv.style.display = 'block';
   }
});

body{
    background-color: #333;
    margin: 0px;
}
#wpisz{
    position: fixed;
    width: 100%;
    height: 40px;
    background-color: #222;
    bottom:15px;
}
#wpisz input{
    height: 99%;
    border: none;
    margin-top: 1%;
    border-radius: 5px;
    width: 80%;
}
#menu{
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #222;
    top:0px;
}
#listy{
    height: 100%;
    width: 85%; 
    background-color: ;
    float: left;
}
#menu input{
    height:100%;
    width:15%;
}
#wpisy{
    margin-top: 60px;
    width: 100%;
    min-height: 500px;
    background-color: ;
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.wpis{
    width: 90%;
    min-height: 30px;
    padding: 4px;
    margin-left:10px;
    border-radius:8px;
}
#ostkolorpojemnik{
    height: 100%;
    width: 15%;
    background-color: teal;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
#zmianakoloru{
    margin-right: auto;
    margin-left: auto;
    width:200px;
    height:275px;
    position: fixed;
    background-color:teal;
    margin-top: 40px;
    display: none;
    justify-content: end;
    border-radius: 20px;
    
}

<DOCTYPE HTML>
     <html>
                         <head>
                  <link rel="stylesheet" href="style.css">
                                             <meta charset="UTF-8">
                                             <script src="main.js"></script>
                                             document.getElementById("wpisy").innerhtml = wynik;
                                             
                         </head>
                         <body>
                                             <div id="zmianakoloru">
                                                                 <input type="color" id="kolorek" value="#008080" style=" height: 120px; width:50%; aspect-ratio:1/1;">
     
                                                                 
                                             </div>
                                             <div id="menu" >
                                                         <div id="listy"></div>
                                                                 <div id="ostkolorpojemnik">
                                                                                          <b><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
       <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
       <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"/></b>
     </svg>                                                                 </div>
                                             </div>								
                                                  <div id="wpisy">
                                                                      
                                                  </div>								
                                             <div id="wpisz">
                                                                 <input type="text" placeholder="wpisz wiadomość" id="tresci">
                                                                 <input id="send" type="submit" style="height:99%; width:19%; text-align: center;" value="wstaw"  onclick="nowywpis()">
                                             </div>						
                                        
     
                         </body> 
     </html>