Ändern Sie CSS mit JS -TasteJavaScript

Javascript-Forum
Anonymous
 Ändern Sie CSS mit JS -Taste

Post by Anonymous »

Ich wollte also zwei Tasten erstellen und wenn einer gedrückt wird, würde es mit jeder Drücke immer größer werden, bis er den gesamten Bildschirm bedeckt, und ich möchte, dass sie nebeneinander sein. Der andere Knopf würde unterschiedliche Dinge, die ich weiß. Mit "transofrm" -Regel und es hat funktioniert, aber ich möchte nicht, dass der Knopf über den ersten übergeht, ich möchte, dass er verschoben wird und neben dem ersten Knopf bleibt, ohne ihn zu bedecken. Mit jeder Drücke der #Nie -Taste möchte ich, dass sie mehr nach rechts verschiebt, ohne den Platz der #Tak -Taste zu nehmen. Ich möchte, dass es mit jedem Drücken < /p>

Code: Select all

< script >
const tak = document.querySelector("#tak");
const nie = document.querySelector("#nie");
const nie2 = document.querySelector("#nie2")

tak.addEventListener('click', () => {
nie.style.transform = '';
nie.style.border = '';
tak.style.transform = 'scale(1)';
})

nie.addEventListener('click', () => {
tak.style.transform = '';
tak.style.border = '';
nie.style.transform = 'scale(1.5)'
}) <
/script>< /code>
body {
background-color: hotpink;

}

h1 {
text-align: center;
}

#buttons {
width: 10em;
margin: 0 auto;
text-align: center;
display: flex;
}

.butto {
display: inline-block;
margin: 0 auto;
text-align: center;
justify-content: center;
}

#tak {
background-color: rgb(47, 214, 47);
border: none;
border-radius: 1em;
width: 7em;
height: 6em;
}

#tak:hover {
background-color: rgb(42, 167, 42);
cursor: pointer;
}

#nie {
background-color: rgb(214, 47, 61);
border: none;
border-radius: 1em;
width: 7em;
height: 6em;
color: white
}

#nie:hover {
background-color: rgb(136, 25, 34);
cursor: pointer;
}

#tak:active {
background-color: rgb(28, 112, 28);
}

#nie:active {
background-color: rgb(158, 52, 61);
position: 20px 50px;
}

< /code>





Walentynki




body {
background-color: hotpink;

}

h1 {
text-align: center;
}

#buttons {
width: 10em;
margin: 0 auto;
text-align: center;
display: flex;
}

.butto {
display: inline-block;
margin: 0 auto;
text-align: center;
justify-content: center;
}

#tak {
background-color: rgb(47, 214, 47);
border: none;
border-radius: 1em;
width: 7em;
height: 6em;
}

#tak:hover {
background-color: rgb(42, 167, 42);
cursor: pointer;
}

#nie {
background-color: rgb(214, 47, 61);
border: none;
border-radius: 1em;
width: 7em;
height: 6em;
color: white
}

#nie:hover {
background-color: rgb(136, 25, 34);
cursor: pointer;
}

#tak:active {
background-color: rgb(28, 112, 28);
}

#nie:active {
background-color: rgb(158, 52, 61);
position: 20px 50px;
}






Lorem, ipsum dolor.


Lorem
Lorem, ipsum.



Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post