mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
OGordoo
e4725fb94f
|
4 years ago | |
|---|---|---|
| .. | ||
| README.md | 4 years ago | |
README.md
DOM example
The example consists in a red box moving by clicking on a button.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<title>SSS</title>
</head>
<body>
<div id="app">
<div
id="box"
style="
width: 100px;
height: 100px;
background: red;
transition: 0.3s;
transform: translateX(0px);
"
></div>
<button id="button" class>Click Me</button>
</div>
</body>
<script>
document.getElementById('button').addEventListener('click', (e) => {
let box = document.getElementById('box')
let actualTranslate = Number(box.style.transform.match(/\d+/g)[0]) + 50
box.style.transform = `translateX(${actualTranslate}px)`
console.log(box.style.transform)
})
</script>
</html>