下の様に取得した要素が、インライン要素かブロック要素かを判断する方法はないでしょうか?
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ベストアンサー
- 回答日時:
こんにちは。
ブロック要素/インライン要素はタグによって基本的な振り分けはなされていますが、それもCSSの設定で変更できてしまいますよね?
なので、少々面倒な気がします。
もしも、御提示のスクリプトでstyle.displayの設定をするのに上記判定が必要というのが目的でしたら、「inline」と「display」はデフォルト設定に、非表示の「none」だけ明示的に設定するということで、対応できそうですが…
表示/非表示 → ""/"none"
という方法ではダメでしょうか?
(この方法だと、HTMLの初期設定は表示にしておかなければならなくなりますが… ロード後に必要な部分は非表示に)
テンポラリな表示状態の判定も、"none"か否かで判別みたいに。
上記以外の目的で判定したいのだとすると、今のところ思いつくのは調べて判定するという方法だけなので、この場合の回答にはならなさそうです。
早速のご回答ありがとうございます。
CSSをよく調べてみました、結果displayの他に
visibility : "visible" 、"hidden"
というのがありました。
これを使うと、元の構造に影響せず、表示・非表示ができました。
ありがとうございました。
No.2
- 回答日時:
#1です。
>visibility : "visible" 、"hidden" というのがありました。
こちらですと、おっしゃるように元の構造を維持したままになるので、
非表示にした時に、場合によっては不自然な空きスペース(空白)ができてしまうことがありますが(特にインライン要素の場合)…
まぁ、使用目的のケースバイケースなので、一概には言えませんが…
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS display: flex; と flex の違い 1 2022/04/25 20:52
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- C言語・C++・C# c言語の問題です 3 2023/01/10 16:15
- JavaScript Google reCAPTCHAについて 1 2023/02/22 14:37
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jsで、switch文で書かれた分をif文にできませんか。 1 2022/07/28 15:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptでスタイルを動的に...
-
URL末尾に特定の文字を含む場合...
-
javascriptテキストBOX色を元に...
-
[急ぎ] videoタグで埋め込んだm...
-
checkboxにチェックを入れると...
-
mysqlのINSERT文の重複回避の条...
-
jTweetsAnywhereでハッシュタグ...
-
HTMLとJavaScriptで作ったタイ...
-
マウスオーバーにてdivの切り替え
-
UWSC(マウス自動化ソフト)に...
-
10秒後に1秒ごとに1行づつ表示...
-
123456789の順番の並...
-
テキストボックスに入力された...
-
スタイルシートで画面を上下に...
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
アコーディオンメニューの開閉制御
-
キャラクターがぴょこんと飛び...
-
OpenCV での画素値の比較について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
HTMLタグに複数のクラスを設定...
-
変数名をどのようにつけるのが...
-
401エラードキュメントを401.ht...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
タブで開いてさらにタブ内をア...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
HTMLとJavaScriptで作ったタイ...
-
getElementByIdの戻り値がnull...
-
指定したパスが現URLに含まれて...
-
[急ぎ] videoタグで埋め込んだm...
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
removeAttribute()メソッドで削...
-
背景色を透明化
-
jQueryで同じid属性が複数あっ...
おすすめ情報