html5分享隐藏栏功能代码,这个代码显示功能如何实现？

左边一个textarea，右边是iframe。

Document

.box {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

flex-direction: row;

flex-wrap: nowrap;

justify-content: center;

align-items: center

}

#editor,

#view {

flex: 1;

height: 300px;

}

#editor textarea {

width: 98%;

height: 100%;

}

#view iframe {

width: 100%;

height: 100%;

}

提交

var code = document.querySelector("textarea"),

iframe = document.querySelector("iframe"),

btn =document.querySelector("#btn")

code.value =

`

p {display: inline}

div {display: none}

本例中的样式表把段落元素设置为内联元素。

而 div 元素不会显示出来！

div 元素的内容不会显示出来！

`

btn.addEventListener("click", function(){

iframe.srcdoc = code.value

})