如何使用JavaScript隱藏沒有HTML dom的html元素？

Question

我想根據javascript的輸入動態隱藏表格元素。 通常，我會使用.getElementById（）訪問要顯示或隱藏的表，但是我不能為此使用HTML DOM。 有哪些替代方案？

Answer 1

您可以僅使用純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>

如何使用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