どうやってjavascriptで表示を変更するのか? [ javascript ]

求めていた答え:

DOM要素やそのCSS属性を適宜変更する

ただこれだけの事だった。

例えば何かの要素の表示・非表示を切り替えたければ、その要素のCSSプロパティdisplayの設定値を変更すればいい、というふうに。

Example:

ここを押すと↓にテキストが出現

Code:
アンダーライン部分のコードでdisplay属性を設定して表示のON/OFFを切り替えている。

<script type="text/javascript">
function toggleIt() {
  var t = document.getElementById("toggle-part");
  t.style.display = (t.style.display != "none") ? "none" : "block";
}
</script>
<p><a href="javascript:toggleIt();">ここを押すと↓にテキストが出現</a></p>
<div id="toggle-part" style="border:1px solid;display:none;margin-left:2em;font-size:120%;font-weight:bold;">もう一回押すと消えます。</div>

ページ遷移しないで表示内容を変更する、これをどうやって実現するのか。
一言で説明して欲しくてWebを漁ったけど、リサーチ力が低いのか、当時は俺が求めるくらいの簡単な説明は発見出来ませんでした。

調べたところDOMとかCSSとは何か、てな情報には行き当たるのだけど、イマイチ欲しいモノではないもどかしさ。
javascriptの文法は分かるしプログラムも書けそうな気がする。
document.writeあたりを使ってhtmlを吐き出すのはある意味わかりやすい。
でもそんなやり方でなく、ページ遷移無しでメニューとか実現できている実例が幾つか目の前にあって、俺はこれがやりたい。
innerHTMLでHTMLを書き換えればいいのか?
みんなそんな事してんの?

何かよく分からんし、別に仕事じゃないから上手くいかなくても誰も困らないし、もうやめようかなあ。 と、半分挫折した気分になりつつも、DOMとかCSSがキーワードとして出てくるのならばきっと答えはこの近くにあるんだろうな、といろいろながめ続けていてある時ふと腑に落ちた答が冒頭の「DOM要素やそのCSS属性を適宜変更する」でした。

後は全て応用問題!どんなサイトでも後は手間暇の問題だ!とかなりスッキリしました。まあ、実際にはそこから先もイロイロハマる事はありましたが。

当たり前すぎて書いてなかったんだなあ、と今は思うけど、当時のオレには結構な発見。全然分からなかった問題がスラスラ解け始める瞬間ってこんな感じだったかなあ、と懐かしい思いに浸った出来事でした。

0 件のコメント:

コメントを投稿