style.displayだと効率悪いから違うやり方をしたいです。

DOBON.NETプログラミング道掲示板

ツリー一括表示
style.displayだと効率悪いから違うやり方をしたいです。 /えっぴー (23/05/11(Thu) 13:00) #35416
`└` Re[1]: style.displayだと効率悪いから違うやり方をしたいです。 /魔界の仮面弁士 (23/05/11(Thu) 13:27) #35417
`└` Re[2]: style.displayだと効率悪いから違うやり方をしたいです。 /えっぴー (23/05/11(Thu) 14:00) #35418
`└` Re[3]: style.displayだと効率悪いから違うやり方をしたいです。 /福ちゃん (23/05/11(Thu) 17:34) #35419 解決済み!
`├` Re[4]: style.displayだと効率悪いから違うやり方をしたいです。 /魔界の仮面弁士 (23/05/11(Thu) 18:32) #35420
`└` 【注意】ルールをお守りください /管理人 (23/05/12(Fri) 03:16) #35421

親記事　/ ▼[ 35417 ]

■35416 / 親階層)

　style.displayだと効率悪いから違うやり方をしたいです。

□投稿者/ えっぴー一般人(1回)-(2023/05/11(Thu) 13:00:19)

環境/言語:[javascript]　
分類:[その他]　

style.displayだと効率悪いから違うやり方をしたいです。
以下はhtmlです。
なぜ効率悪いかというと、
一つ一つ、
セレクトごとに、
document.getElementById('Box1').style.display = "";と、
document.getElementById('Box1').style.display = "none";
を書かなければならないからです。
構文が長くなってしまい、非効率です。
しかし、document.getElementById自体1つしか書けないのです。
for文を使う必要があるのです。
ご教授願えたら幸いです。
<div class="col-auto my-1">
<label for="sample">選択してください</label>
</div>
<div class="col-auto my-1">
<select class="form-control" id="sample" onchange="viewChange();">
<option value="select1">one</option>
<option value="select2">two</option>
<option value="select3">three</option>
</select>
</div>
<div class="col-auto my-5">
<div id="Box1" class="my-5">
<p>one</p>
</div>
<div id="Box2" class="my-5">
<p>two</p>
</div>
<div id="Box3" class="my-5">
<p>three</p>
</div>
</div>
<script>
function viewChange(){
if(document.getElementById('sample')){
id = document.getElementById('sample').value;
if(id == 'select1'){
document.getElementById('Box1').style.display = "";
document.getElementById('Box2').style.display = "none";
document.getElementById('Box3').style.display = "none";
}else if(id == 'select2'){
document.getElementById('Box1').style.display = "none";
document.getElementById('Box2').style.display = "";
document.getElementById('Box3').style.display = "none";
}
else if(id == 'select3'){
document.getElementById('Box1').style.display = "none";
document.getElementById('Box2').style.display = "none";
document.getElementById('Box3').style.display = "";
}
}

window.onload = viewChange;
}
</script>
javascript全文を書いていただければ幸いです。

違反を報告

▲[ 35416 ] / ▼[ 35418 ]

■35417 / 1階層)

　Re[1]: style.displayだと効率悪いから違うやり方をしたいです。

□投稿者/ 魔界の仮面弁士大御所(1544回)-(2023/05/11(Thu) 13:27:36)

2023/05/11(Thu) 13:31:57 編集(投稿者)

■No35416に返信(えっぴーさんの記事)
> style.displayだと効率悪いから違うやり方をしたいです。
そもそもなぜ、style を直接操作したいのでしょうか。
基本的には css クラスで操作する設計にするべきだと思いますが…。
https://ja.javascript.info/styles-and-classes

CSS や JS 向けのフレームワークを使うにせよ使わないにせよ、
広域的操作であれば class / className で調整した方が便利かと。

> セレクトごとに、
> document.getElementById('Box1').style.display = "";と、
> document.getElementById('Box1').style.display = "none";
> を書かなければならないからです。
短縮表記だけの話なら、
　const $id = document.getElementById;
みたいにエイリアスを用意して、
　$id('box1').style.display = 'none';
などとは書けますね。

あるいは CSSStyleDeclaration オブジェクト自体をキャッシュした
　let boxStyle = document.getElementById('Box1').style;
などを用意しておけば、以降は
　boxStyle.display = 'none';
と書くことはできますが…いずれにせよ、style は積極的に使うべきでなく、
基本的には CSS クラスで制御するようにし、それで処理しきれない要素に
限定して、style の直接操作を試みた方が良いでしょう。

> しかし、document.getElementById自体1つしか書けないのです。
document.querySelector
document.querySelectorAll
を使わないのは何故ですか? (CSS セレクター指定)
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

違反を報告

▲[ 35417 ] / ▼[ 35419 ]

■35418 / 2階層)

　Re[2]: style.displayだと効率悪いから違うやり方をしたいです。

□投稿者/ えっぴー一般人(2回)-(2023/05/11(Thu) 14:00:44)

全文と言いました。
僕は天才のように、断片的な情報から組み合わせて、完成したものを作る能力はございません。

違反を報告

▲[ 35418 ] / ▼[ 35420 ] ▼[ 35421 ]

■35419 / 3階層)

　Re[3]: style.displayだと効率悪いから違うやり方をしたいです。

□投稿者/ 福ちゃん一般人(3回)-(2023/05/11(Thu) 17:34:17)

もういいです。
あなたを役立たずとみなします。

解決済み!

違反を報告

▲[ 35419 ] / 返信無し

■35420 / 4階層)

　Re[4]: style.displayだと効率悪いから違うやり方をしたいです。

□投稿者/ 魔界の仮面弁士大御所(1545回)-(2023/05/11(Thu) 18:32:47)

■No35418に返信(えっぴーさんの記事)
> 全文と言いました。
https://codepen.io/benshi-orator/pen/poxVZbg

■No35419に返信(福ちゃんさんの記事)
> もういいです。
解決済みチェックの「スレッドを閉じる目的ではチェックしないでください!」
と書かれた赤文字を読まれましたか?

掲示板の投稿ルールを守って利用してください。
https://dobon.net/vb/bbs/index.html

違反を報告

▲[ 35419 ] / 返信無し

■35421 / 4階層)

　【注意】ルールをお守りください

□投稿者/ 管理人一般人(1回)-(2023/05/12(Fri) 03:16:45)

えっぴーさんの今までのご投稿（別のお名前でのご投稿もありますが）を拝見させていただくと、明らかに書き込みのルールが守られていません。

書き込みのルールについて
https://dobon.net/vb/bbs/index.html

しかし、それ以前の問題として、No35419 のご投稿は、人を侮辱した内容であり、あまりにひどいです。よって、大変申し訳ありませんが、えっぴーさんのご投稿を一時的に禁止させていただきます。

今後はルールをお守りいただけると約束していただけるのであれば、投稿禁止を解除させていただきますので、その場合は管理人へご連絡ください。

なお、さらなる迷惑行為が行われた場合は、さらに厳しい対応をとらせていただくことになってしまうかもしれませんので、絶対にやめてください。

以上です。よろしくお願いいたします。

違反を報告