Template:Menu side: Difference between revisions
From WikiMSK
No edit summary |
mNo edit summary |
||
| Line 1: | Line 1: | ||
<div class="menu-side | <div class="menu-side"> | ||
<div class="menu-side-header">{{{1}}}</div> | <div class="menu-side-header">{{{1}}}</div> | ||
<div class="menu-side-content | <div class="menu-side-content">{{{2}}}</div> | ||
</div> | </div> | ||
<div>Click Me</div> | |||
const div = document.querySelector('div'); | |||
<html> | <html> | ||
<style> | <style> | ||
div { | |||
padding: 40px; | |||
background: red; | |||
} | |||
.menu-side { | .menu-side { | ||
background: #f8f9fa; | background: #f8f9fa; | ||
| Line 37: | Line 47: | ||
</style> | </style> | ||
<script> | <script> | ||
function toggleStyle(el, prop, style1, style2) { | function toggleStyle(el, prop, style1, style2) { | ||
el.style[prop] = el.style[prop] === style1 ? style2 : style1; | el.style[prop] = el.style[prop] === style1 ? style2 : style1; | ||
} | } | ||
div.addEventListener('click', e => { | |||
toggleStyle( | toggleStyle(div, 'background', 'red', 'blue'); | ||
}); | }); | ||
</script> | </script> | ||
</html> | </html> | ||
Revision as of 23:58, 19 March 2022
Click Me
const div = document.querySelector('div');
