JavaScriptを使用してHTML domなしでhtml要素を非表示にするにはどうすればよいですか？

javascriptからの入力に基づいてテーブル要素を動的に非表示にしたい。通常は、表示または非表示にするテーブルにアクセスするために.getElementById（）を使用しますが、HTML DOMを使用することはできません。どのような選択肢がありますか？JavaScriptを使用してHTML domなしでhtml要素を非表示にするにはどうすればよいですか？

出典

2016-05-13 Rameen Rastan

あなたはあなたがDOMを使用することはできません意味_sure_ていますか？それとも、 'id'で要素にアクセスできないのですか？ – canon

DOMを使用できないということはどういう意味ですか？あなたがそれをやり遂げるのを妨げるのは何ですか？ DOMを "使用できない"場合は、ブラウザが表示している内容に影響を与えることはできません.DOMは、そのAPIと同じAPIです。 – Pointy

あなたはどのような情報を入手しているのか、どの情報を隠そうとしているのかといった詳細な情報を教えてください。 – Dawcars

これは、純粋なCSSを使用して行うことができます。 jsを放棄する。このスニペットを調べてください。それは（表示/非表示ボタンに）「トリガ」を持っています。私はそれがあなたの目的のために調整できると確信しています。

html { 
 
    background: white 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
figure { 
 
    margin: 0 0 1.3rem 0; 
 
    -webkit-transition: .125s linear; 
 
    -moz-transition: .125s linear; 
 
    -ms-transition: .125s linear; 
 
    -o-transition: .125s linear; 
 
    transition: .125s linear; 
 
} 
 
figure img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
body { 
 
    max-width: 480px; 
 
    width: 90%; 
 
    margin: 3em auto; 
 
    font-size: 75%; 
 
    line-height: 1.3rem; 
 
    font-family: sans-serif; 
 
    position: relative; 
 
    *zoom: 1; 
 
} 
 
body:before, 
 
body:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
body:after { 
 
    clear: both 
 
} 
 
p { 
 
    margin-bottom: 1.3rem 
 
} 
 
article { 
 
    margin-bottom: 3rem; 
 
    position: relative; 
 
    *zoom: 1; 
 
} 
 
article:before, 
 
article:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
article:after { 
 
    clear: both 
 
} 
 
article figure { 
 
    float: left; 
 
    width: 32.5%; 
 
} 
 
article section:first-of-type { 
 
    float: right; 
 
    width: 62.5%; 
 
} 
 
article section:last-of-type { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 
section { 
 
    -webkit-transition: .125s linear; 
 
    -moz-transition: .125s linear; 
 
    -ms-transition: .125s linear; 
 
    -o-transition: .125s linear; 
 
    transition: .125s linear; 
 
} 
 
input[type=checkbox] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    width: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
} 
 
label { 
 
    position: absolute; 
 
    bottom: -3rem; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: .65rem; 
 
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); 
 
} 
 
label:hover { 
 
    background: rgba(0, 0, 0, .5); 
 
    color: rgb(255, 255, 255); 
 
} 
 
label span:last-of-type { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 
input[type=checkbox]:checked ~ section { 
 
    display: block; 
 
    visibility: visible; 
 
    width: 100%; 
 
} 
 
input[type=checkbox]:checked ~ figure { 
 
    width: 100% 
 
} 
 
input[type=checkbox]:checked ~ label span:first-of-type { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 
input[type=checkbox]:checked ~ label span:last-of-type { 
 
    display: block; 
 
    visibility: visible; 
 
}

<body> 
 
    <article> 
 
    <input type="checkbox" id="read_more" role="button"> 
 
    <label for="read_more" onclick=""><span>Show</span><span>Hide</span> 
 

 
    </label> 
 
    <figure> 
 
     <img src="http://www.musicmatters.ie/images/bara2.jpg" alt="Picture" /> 
 
    </figure> 
 
    <section> 
 
     <p>Short Intro goes here. Write whatever you like.</p> 
 
    </section> 
 
    <section> 
 
     <p>Full article goes here. We'll make do with lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum 
 
     elementum quam et interdum. Integer vitae augue vitae nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit 
 
     massa vitae ullamcorper fermentum. Nam rutrum odio dui, vitae tempus dui maximus sed.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum elementum quam et interdum. Integer vitae augue vitae 
 
     nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit massa vitae ullamcorper fermentum. Nam rutrum odio dui, 
 
     vitae tempus dui maximus sed.</p> 
 
    </section> 
 
    </article>

出典

2016-05-13 17:12:09

@RameenRastan btwこれが役立つ場合は、その横にカーソルを置いたときに表示されるチェックマークをクリックしてこの回答を受け入れることができます。私たちはどちらもその評判を得ています！ :) –

JavaScriptを使用してHTML domなしでhtml要素を非表示にするにはどうすればよいですか？

答えて

関連する問題