如何隱藏HTML元素沒有HTML DOM使用JavaScript？

我想根據javascript的輸入動態地隱藏表格元素。通常我會使用.getElementById（）來訪問我想要顯示或隱藏的表格，但我無法使用HTML DOM。還有什麼替代方法？如何隱藏HTML元素沒有HTML DOM使用JavaScript？

來源

2016-05-13 Rameen Rastan

你_sure_你的意思是你不能使用DOM？或者你的意思是你不能通過'id'訪問元素？ – canon

你是什麼意思，你「不能」使用DOM？什麼阻止你這樣做？如果您「不能」使用DOM，則不會影響瀏覽器顯示的內容，因爲DOM是與之相關的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順便說一句，如果這有助於你，你可以通過點擊懸停在旁邊的勾號來接受這個答案。我們都爲此贏得聲譽！ :) –

如何隱藏HTML元素沒有HTML DOM使用JavaScript？

回答

相關問題