ここから本文です

要素のスタイル「display」の状態によって判定して、何かをするということがしたい...

アバター

ID非公開さん

2018/3/114:31:06

要素のスタイル「display」の状態によって判定して、何かをするということがしたいのですが、displayの状態を読み取る方法を教えてください

閲覧数:
37
回答数:
2
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2018/3/118:13:23

具体的な例がないと回答しにくいですね。

結局,
要素(DOMエレメント)の捉まえ方 と
スタイルの付け方が問題なのですから。



私から具体例を挙げるとすれば
次のような感じ(3例)でどうでしょうか?



【例1】

<!DOCTYPE html>
<html>
<head>
<meta charset="shift_jis">
<title>Example 1</title>
</head>
<body>

<p>あい<span style="display: none;">うえ</span>お</p>
<p>か<span style="display: inline;">きく</span>けこ</p>
<p>さし<span style="display: block;">す</span>せそ</p>

<script>
var spns = document.querySelectorAll("span");
for(var i = 0; i < spns.length; i++){
    alert(spns[i].style.display);
}
</script>

</body>
</html>



【例2】

<!DOCTYPE html>
<html>
<head>
<meta charset="shift_jis">
<title>Example 2</title>
</head>
<body>

<p>あい<span style="display: none;">うえ</span>お</p>
<p>か<span style="display: inline;">きく</span>けこ</p>
<p>さし<span style="display: block;">す</span>せそ</p>

<script>
var spns = document.querySelectorAll("span");
for(var i = 0; i < spns.length; i++){
    alert(getComputedStyle(spns[i]).getPropertyValue("display"));
}
</script>

</body>
</html>



【例3】

<!DOCTYPE html>
<html>
<head>
<meta charset="shift_jis">
<title>Example 3</title>
<style>
.spn0{
    display: none;
}
.spn1{
    display: inline;
}
.spn2{
    display: block;
}
</style>
</head>
<body>

<p>あい<span class="spn0">うえ</span>お</p>
<p>か<span class="spn1">きく</span>けこ</p>
<p>さし<span class="spn2">す</span>せそ</p>

<script>
var spns = document.querySelectorAll("span");
for(var i = 0; i < spns.length; i++){
    alert(getComputedStyle(spns[i]).getPropertyValue('display'));
}
</script>

</body>
</html>



3例を挙げましたが
結局
getComputedStyle(要素).getPropertyValue('display')
で取得できるんじゃないかという意味です。

ちなみに
getComputedStyle(要素)

window.getComputedStyle(要素)
の window を省略した書き方のメソッドです。

アバター

質問した人からのコメント

2018/3/5 21:05:30

ありがとうございます。取得することができサイト機能の向上にまたひとつ繋がりました。

ベストアンサー以外の回答

1〜1件/1件中

ark********さん

2018/3/118:05:23

$('要素').css('display')で、displayの状態を取得できます。

参考
https://jsfiddle.net/3y7dqjka/13/

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる