如何隐藏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？

回答

相关问题