今詰まっている問題としてはJSでclassの変更をして見た目を変更させたいんですが
例で出しているもので言うとheaderだけは変更が効くのですがそれ以降のタグたちは
.cのCSSが適応されているっぽいんですけどこれはどうしたらいいんでしょうか...
子あるいは孫だけに適応させるようなCSSの書き方とかはあるのでしょうか?
本来はbodyのクラスを書き換えて全体をdivで囲んで各パーツを作ってるのでできれば孫だけに反映できるものがあると助かるんですけど
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="index.css"> 6 <script type="text/javascript" src="index.js"></script> 7 <title>Document</title> 8</head> 9<body> 10 <div id="style" class="c"> 11 <header>header</header> 12 <nav>nav</nav> 13 <main>main</main> 14 <aside>aside</aside> 15 <footer>footer</footer> 16 </div> 17 <form action="./setcss.cgi" method="get" name="mainForm"> 18 <input type="button" id="a" value="白"> 19 <input type="button" id="b" value="黄"> 20 <input type="button" id="c" value="黒"> 21 </form> 22</body> 23</html>
css
1.a>header,footer,main,nav,aside 2{box-sizing: border-box;padding: 10px; 3border-radius: 6px;border: solid 1px #00d; 4background-color:#44f;color:#fff; 5transition: .5s;} 6 7.b>header,footer,main,nav,aside 8{box-sizing: border-box;padding: 10px; 9border-radius: 6px;border: solid 1px #000; 10background-color:#333;color:#ff0; 11transition: .5s;} 12 13.c>header,footer,main,nav,aside 14{box-sizing: border-box;padding: 10px; 15border-radius: 6px;border: solid 1px #ccc; 16background-color:#fff;color:#000; 17transition: .5s;} 18
JS
1window.onload = function(){ 2 document.getElementById("a").onclick = function(){ 3 const main = document.getElementById('style'); 4 main.classList.add('a'); 5 main.classList.remove('b','c'); 6 } 7 document.getElementById("b").onclick = function(){ 8 const main = document.getElementById('style'); 9 main.classList.add('b'); 10 main.classList.remove('a','c'); 11 } 12 document.getElementById("c").onclick = function(){ 13 const main = document.getElementById('style'); 14 main.classList.add('c'); 15 main.classList.remove('a','b'); 16 } 17} 18
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。