TAG
CSS
JavaScript
Result
Run
License
<p> <input type="checkbox" id="display-contents" /> <label for="display-contents">Set the inner element's display property to contents.</label> </p> <div class="outer"> I am outer's contents. <div class="inner">I am inner's contents.</div> </div>
.outer { border: 2px solid #ed6104; background-color: #fca976; padding: 20px; } .inner { background-color: #f9ee9a; padding: 20px; color: #FF0000; }
window.addEventListener("load", function() { var elInner = document.querySelector(".inner"); document.querySelector("#display-contents").onchange = function() { let dispay; if (this.checked) display = "contents"; else display = "block"; elInner.style.display = display; }; });
Console
expand_less
License
License
by DevDic
Close