バニラJavaScriptを使用した切り替えボタンの作成
5953 ワード
バニラjavascriptの練習では、簡単なUIを作成することをお勧めします.
だから切り替えボタンを作る
入力文字をうまく利用してほしい.
私も初心者ですが、入門者の時、このコードを直接書くのは難しいです.
だから切り替えボタンを作る
<div class="wrap">
<button class="toggleBtn">토글</button>
<p class="toggleTarget">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, placeat. Reiciendis quia amet, quam nemo quos quod distinctio explicabo saepe cupiditate, quasi perspiciatis magnam.
</p>
</div>
HTMLは上記の通りです..toggleBtn{
display: block;
width: 80px;
height: 50px;
margin: 50px auto 0;
}
.toggleTarget{
width: 800px;
margin: 20px auto 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: none;
}
.toggleTarget.on{
display: block;
}
CSSは上記の通りです.// 토글버튼 만들기
const _toggleBtn = _get('.toggleBtn')
const _toggleTarget = _get('.toggleTarget')
const toggleEvent = () => {
if(_toggleTarget.className == 'toggleTarget'){
_toggleTarget.className = 'toggleTarget on'
} else {
_toggleTarget.className = 'toggleTarget'
}
}
_toggleBtn.addEventListener('click', toggleEvent)
JSは上記の通りです.入力文字をうまく利用してほしい.
私も初心者ですが、入門者の時、このコードを直接書くのは難しいです.
Reference
この問題について(バニラJavaScriptを使用した切り替えボタンの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@comeon/바닐라-자바스크립트로-토글버튼만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol