[コードアップルJSベース]Bootstrap,class取り外しのための切り替え関数,querySelector
11185 ワード
Bootstrapガイドテープ
Bootstrapでhtml、cssを書く時間を減らすことができます.
使用方法:
ブートストラップの起動
ここで
必要なデザインのコード(ボタン、リストなど)をコピーして貼り付けます.<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
class取り外し可能スイッチ <script>
document.getElementsByClassName("list-group")[0].classList.toggle("show");
</script>
document.getElementsByClassName("list-group")[0].
=>htmlのクラス名リストグループの0番目の要素
classList.toggle("show")
=>この要素のクラス名に「show」がない場合は、後にshowを付け、ある場合はshowを削除します.
querySelector <script>
document.querySelector(".list-group").classList.toggle("show");
//class="list-group"인 요소 선택, class 선택 시 css문법을 적용해서 .classname 형식으로 작성해야한다.
document.querySelector("#test").classList.toggle("show");//id Selector
//id="show"인 요소 선택, id 선택 시 css 문법을 적용해 #idname 형식으로 작성해야한다.
</script>
querySelectorAll
querySelectorは一番上の
したがって、同じ名前のクラス要素が複数ある場合は、そのうちの1つだけを選択します.querySelectorAll[몇 번째]を使用する必要があります.//같은 이름의 클래스 중 두번째 것을 선택하고 싶다면
<script>
document.querySelectorAll(".list-group")[1].classList.toggle("show");
</script>
同じように使用してください.
Reference
この問題について([コードアップルJSベース]Bootstrap,class取り外しのための切り替え関数,querySelector), 我々は、より多くの情報をここで見つけました
https://velog.io/@jessiii/코딩애플-JS기초-Bootstrap-사용하기-class-탈부착식-개발
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul><script>
document.getElementsByClassName("list-group")[0].classList.toggle("show");
</script>=>htmlのクラス名リストグループの0番目の要素
classList.toggle("show")
=>この要素のクラス名に「show」がない場合は、後にshowを付け、ある場合はshowを削除します.
querySelector <script>
document.querySelector(".list-group").classList.toggle("show");
//class="list-group"인 요소 선택, class 선택 시 css문법을 적용해서 .classname 형식으로 작성해야한다.
document.querySelector("#test").classList.toggle("show");//id Selector
//id="show"인 요소 선택, id 선택 시 css 문법을 적용해 #idname 형식으로 작성해야한다.
</script>
querySelectorAll
querySelectorは一番上の
したがって、同じ名前のクラス要素が複数ある場合は、そのうちの1つだけを選択します.querySelectorAll[몇 번째]を使用する必要があります.//같은 이름의 클래스 중 두번째 것을 선택하고 싶다면
<script>
document.querySelectorAll(".list-group")[1].classList.toggle("show");
</script>
同じように使用してください.
Reference
この問題について([コードアップルJSベース]Bootstrap,class取り外しのための切り替え関数,querySelector), 我々は、より多くの情報をここで見つけました
https://velog.io/@jessiii/코딩애플-JS기초-Bootstrap-사용하기-class-탈부착식-개발
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<script>
document.querySelector(".list-group").classList.toggle("show");
//class="list-group"인 요소 선택, class 선택 시 css문법을 적용해서 .classname 형식으로 작성해야한다.
document.querySelector("#test").classList.toggle("show");//id Selector
//id="show"인 요소 선택, id 선택 시 css 문법을 적용해 #idname 형식으로 작성해야한다.
</script>querySelectorは一番上の
したがって、同じ名前のクラス要素が複数ある場合は、そのうちの1つだけを選択します.
querySelectorAll[몇 번째]を使用する必要があります.//같은 이름의 클래스 중 두번째 것을 선택하고 싶다면
<script>
document.querySelectorAll(".list-group")[1].classList.toggle("show");
</script>Reference
この問題について([コードアップルJSベース]Bootstrap,class取り外しのための切り替え関数,querySelector), 我々は、より多くの情報をここで見つけました https://velog.io/@jessiii/코딩애플-JS기초-Bootstrap-사용하기-class-탈부착식-개발テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol