ここから本文です

divで囲って文字を非表示にするのはわかります。でも、idを指定して非表示にするこ...

sat********さん

2019/1/2219:30:18

divで囲って文字を非表示にするのはわかります。でも、idを指定して非表示にすることができません。
カテゴリのidとか、記事のidとかを指定する時ってどうやってすればいいですか?

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

違反報告

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

プロフィール画像

カテゴリマスター

glo********さん

2019/1/2318:29:49

非常に具体性に欠けるご質問であるため
逆に「どうやったらできなかったのか?」がわかりませんが。


まず
「非表示」と言っても "代表的な方法" としては
「display を none にする」という方法と
「visibility を hidden にする」という2種類の方法があります。
※ あくまでも "代表的な方法" です!
   「座標をとんでもない位置に移動する」とか
   「文字などの色を背景色と同色にする」など…
    他にも方法はあります。


上に書いた2種類の方法について
それぞれ6通りのコード例(計12コード例)を試してみましたが
どれもちゃんと「非表示」になりましたよ。

そのそれぞれ6通りのコード例(計12コード例)を書いてみます。
どれも「BBBBB」が非表示になります。



【例 1-1】

<!DOCTYPE html>
<html>
<head>
<title>Example 2-1</title>
<style>
#BBB {
    display:none;
}
</style>
</head>
<body>
<div id="AAA">AAAAA</div>
<div id="BBB">BBBBB</div>
<div id="CCC">CCCCC</div>
</body>
</html>



【例 1-2】

<!DOCTYPE html>
<html>
<head>
<title>Example 1-2</title>
</head>
<body>
<div id="AAA">AAAAA</div>
<div id="BBB">BBBBB</div>
<div id="CCC">CCCCC</div>
<script>
document.querySelector("#BBB").style.display = "none";
</script>
</body>
</html>



【例 1-3】

<!DOCTYPE html>
<html>
<head>
<title>Example 1-3</title>
<script>
window.addEventListener("load",function(){
    document.querySelector("#BBB").style.display = "none";
});
</script>
</head>
<body>
<div id="AAA">AAAAA</div>
<div id="BBB">BBBBB</div>
<div id="CCC">CCCCC</div>
</body>
</html>



【例 2-1】

<!DOCTYPE html>
<html>
<head>
<title>Example 2-1</title>
<style>
#BBB {
    display:none;
}
</style>
</head>
<body>
<div id="AAA">AAAAA<span id="BBB">BBBBB</span>CCCCC</div>
</body>
</html>



【例 2-2】

<!DOCTYPE html>
<html>
<head>
<title>Example 2-2</title>
</head>
<body>
<div id="AAA">AAAAA<span id="BBB">BBBBB</span>CCCCC</div>
<script>
document.querySelector("#BBB").style.display = "none";
</script>
</body>
</html>



【例 2-3】

<!DOCTYPE html>
<html>
<head>
<title>Example 2-3</title>
<script>
window.addEventListener("load",function(){
    document.querySelector("#BBB").style.display = "none";
});
</script>
</head>
<body>
<div id="AAA">AAAAA<span id="BBB">BBBBB</span>CCCCC</div>
</body>
</html>



【例 3-1】

<!DOCTYPE html>
<html>
<head>
<title>Example 3-1</title>
<style>
#BBB {
    visibility:hidden;
}
</style>
</head>
<body>
<div id="AAA">AAAAA</div>
<div id="BBB">BBBBB</div>
<div id="CCC">CCCCC</div>
</body>
</html>



【例 3-2】

<!DOCTYPE html>
<html>
<head>
<title>Example 3-2</title>
</head>
<body>
<div id="AAA">AAAAA</div>
<div id="BBB">BBBBB</div>
<div id="CCC">CCCCC</div>
<script>
document.querySelector("#BBB").style.visibility = "hidden";
</script>
</body>
</html>



【例 3-3】

<!DOCTYPE html>
<html>
<head>
<title>Example 3-3</title>
<script>
window.addEventListener("load",function(){
    document.querySelector("#BBB").style.visibility = "hidden";
});
</script>
</head>
<body>
<div id="AAA">AAAAA</div>
<div id="BBB">BBBBB</div>
<div id="CCC">CCCCC</div>
</body>
</html>



【例 4-1】

<!DOCTYPE html>
<html>
<head>
<title>Example 3-1</title>
<style>
#BBB {
    visibility:hidden;
}
</style>
</head>
<body>
<div id="AAA">AAAAA<span id="BBB">BBBBB</span>CCCCC</div>
</body>
</html>



【例 4-2】

<!DOCTYPE html>
<html>
<head>
<title>Example 4-2</title>
</head>
<body>
<div id="AAA">AAAAA<span id="BBB">BBBBB</span>CCCCC</div>
<script>
document.querySelector("#BBB").style.visibility = "hidden";
</script>
</body>
</html>



【例 4-3】

<!DOCTYPE html>
<html>
<head>
<title>Example 4-3</title>
<script>
window.addEventListener("load",function(){
    document.querySelector("#BBB").style.visibility = "hidden";
});
</script>
</head>
<body>
<div id="AAA">AAAAA<span id="BBB">BBBBB</span>CCCCC</div>
</body>
</html>



---------------------------------

ご質問には

> カテゴリのidとか、記事のidとかを指定する

と書かれていますが
具体的にはどういうことでしょうか?
具体的なことが全くわかりません。


ちなみに
そのページ内のエレメントの id の値は
ユニーク(唯一無二)なものでなければなりません。
(重複してはダメ)

例えば
↓こんなのは HTML のルール違反です。

<body>
<div id="AAA">AAAAA</div>
<div id="AAA">BBBBB</div>
<div id="AAA">CCCCC</div>
</body>

例えば
こんなのをどうにかしようとすることが間違いで
こんなのをゴリ押しでどうにかしようとする前に
ルール違反の HTML を修正すべきです。

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

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

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

1〜1件/1件中

sik********さん

編集あり2019/1/2219:34:28

要素のid属性にカテゴリや記事のIDが入っているのであれば、CSSで#(id) { display: hidden; }と指定してみてはどうでしょうか。
またはgetElementByIdしてclassを追加するなどがあります。
ただこの場合はdata属性を使うべきだというのが主観です。

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

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

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

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

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

閉じる

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

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

閉じる