Q&A
コードはマークダウンのcode機能を利用してご提示ください。
あと「環境によっては」が何を前提、想定しているものか具体的に記載してください。自身で何かしら検証したうえでの話なら書いてないと分かりません(問題や課題が明確でない)。
下記コードはdiv要素を「違うclassを追加する」ことで開閉していますが、これは一般的な書き方ですか?(元のcssを違うclassを追加することで操作するということです)
cssバージョンが変わると動作しなくなるなど危険な書き方でしょうか?
個人的には簡単な書き方なので今後も色々応用させたいのですがネットで調べても情報が少なく(調べ方が悪いだけかも)不安になりました。
ちなみにレガシーブラウザは無視でOKです。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <style> .out{ display: none; } .in{ display: inline; } </style> </head> <body> <P id="b">ボタン</P> <div class="out">test</div> <script> document.getElementById("b").onclick = function() { out = document.getElementsByClassName('out')[0]; out.classList.toggle('in'); } </script> </body> </html>
*もっと簡単で応用が効く書き方があったら教えて下さい。お願いします
回答1件
0
ベストアンサー
動きとしては問題ないですが、「同じ詳細度のセレクタを、順序で優先度を付ける形としている」というのは、あまり行儀は良くないです。
.out.inという状況もあまり印象が良くないので、.outを別な名前（たとえば.toggling）にして、.toggling.inでdisplayを切り替える、というようにしたほうがいいかと思います。
投稿2020/08/08 22:26
総合スコア145183
回答をありがとうございます。そうですか・・あまり良くないですか。displayだけでなく単純なcss周りをこの書き方で出来るなら、cssファイルを汚さず修正や管理がとても簡単にできると思ったのですが。またいろいろ考えます!
あなたの回答
tips
プレビュー
