取得した要素がインライン要素かブロック要素かを判定する方法はないでしょうか？

質問

下の様に取得した要素が、インライン要素かブロック要素かを判断する方法はないでしょうか？
　document.onclick = function(evt){
　　var e = evt?evt.target:event.srcElement;
　　for (i in e.parentNode.childNodes){
　　　if(e.parentNode.childNodes[i].nodeType ==1 && e.parentNode.childNodes[i] != e){
　　　　if(e.parentNode.childNodes[i].style.display =="none"){
　　　　　alert(e.parentNode.childNodes[i].tagName);
/* ブロック要素かインライン要素かを判定したい！*/
/* インライン要素 */
　　　　　e.parentNode.childNodes[i].style.display = "inline";
/* ブロック要素 */
　　　　　e.parentNode.childNodes[i].style.display = "block";
　　　　}else{
　　　　　e.parentNode.childNodes[i].style.display = "none";
　　　　}
　　　}
　　}
　}

回答No.1

fujillin · ベストアンサー

こんにちは。

ブロック要素/インライン要素はタグによって基本的な振り分けはなされていますが、それもCSSの設定で変更できてしまいますよね？
なので、少々面倒な気がします。

もしも、御提示のスクリプトでstyle.displayの設定をするのに上記判定が必要というのが目的でしたら、「inline」と「display」はデフォルト設定に、非表示の「none」だけ明示的に設定するということで、対応できそうですが…
　　表示/非表示　→　""/"none"
という方法ではダメでしょうか？
（この方法だと、HTMLの初期設定は表示にしておかなければならなくなりますが…　ロード後に必要な部分は非表示に）
テンポラリな表示状態の判定も、"none"か否かで判別みたいに。

上記以外の目的で判定したいのだとすると、今のところ思いつくのは調べて判定するという方法だけなので、この場合の回答にはならなさそうです。

お礼

早速のご回答ありがとうございます。
CSSをよく調べてみました、結果displayの他に
visibility ： "visible"　、"hidden"
というのがありました。
これを使うと、元の構造に影響せず、表示・非表示ができました。
ありがとうございました。

回答No.2

fujillin

#1です。

＞visibility ： "visible"　、"hidden"　というのがありました。
こちらですと、おっしゃるように元の構造を維持したままになるので、
非表示にした時に、場合によっては不自然な空きスペース（空白）ができてしまうことがありますが（特にインライン要素の場合）…

まぁ、使用目的のケースバイケースなので、一概には言えませんが…