Я хочу динамически скрывать элементы таблицы на основе ввода из javascript. Обычно я использовал .getElementById() для доступа к таблицам, которые я хочу показать или скрыть, но я не могу использовать HTML DOM для этого. Какие существуют альтернативы?Как скрыть элементы html без HTML dom с помощью JavaScript?
Вы можете сделать это, используя только чистые css. Отбросьте js. Изучите этот фрагмент. Он имеет триггер (в кнопке show/hide). Я уверен, что он может быть скорректирован для ваших целей.
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>@RameenRastan btw, если это вам поможет, вы можете принять этот ответ, нажав галочку, которая появляется, когда вы наведете рядом с ней. Мы оба заслужили репутацию! :) –
Вы _sure_ вы имеете в виду, вы не можете использовать DOM? Или вы имеете в виду, что вы не можете получить доступ к элементу с помощью 'id'? – canon
Что значит, что вы «не можете» использовать DOM? Что мешает вам это делать? Если вы не можете использовать DOM, вы не можете повлиять на отображение браузера, поскольку DOM - это API, с которым это делается. – Pointy
Не могли бы вы дать больше информации о том, какой ввод вы получаете, и как это относится к тому, что вы хотите скрыть? – Dawcars