如何使用JavaScript隐藏没有HTML dom的html元素？

Question

I want to dynamically hide table elements based on input from javascript. 我想根据javascript的输入动态隐藏表格元素。 Normally I would use .getElementById() to access the tables that I want to show or hide, but I can't use HTML DOM for this. 通常，我会使用.getElementById（）访问要显示或隐藏的表，但是我不能为此使用HTML DOM。 What alternatives are there? 有哪些替代方案？

Answer 1

You can do this using just pure css. 您可以仅使用纯CSS来执行此操作。 Abandon the js. 放弃js。 Examine this snippet. 检查此代码段。 It has a 'trigger' (in the show/hide button). 它有一个“触发器”（在“显示/隐藏”按钮中）。 I'm sure it can be adjusted for your purposes. 我确定可以根据您的目的进行调整。

 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>

如何使用JavaScript隐藏没有HTML dom的html元素？

问题描述

1 个解决方案

解决方案1
1 2016-05-13 17:12:09

如何使用JavaScript隐藏没有HTML dom的html元素？

问题描述

1 个解决方案

解决方案1 1 2016-05-13 17:12:09

解决方案1
1 2016-05-13 17:12:09