左边一个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
})