<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.css">
<style>
.CodeMirror {
border: 1px solid #ccc
}
</style>
</head>
<body>
<textarea id="textareaCode"></textarea>
<button onclick="submitTryit()">点击运行</button>
<div id="iframewrapper"></div>
</body>
<script src="http://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.js"></script>
<script>
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{
matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null
},
{
matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"
}]
}
var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
mode: mixedMode,
selectionPointer: true,
lineNumbers: false,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true
})
window.addEventListener("resize", autodivheight)
function autodivheight() {
var winHeight = 0
if (window.innerHeight) {
winHeight = window.innerHeight
} else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight
}
//通过深入Document内部对body进行检测，获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight) {
winHeight = document.documentElement.clientHeight
}
height = winHeight * 0.68
editor.setSize('100%', height)
document.getElementById("iframeResult").style.height = height + "px"
}
function resetCode() {
var initCode = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\"> \n<title>\u83dc\u9e1f\u6559\u7a0b(runoob.com)<\/title> \n<style>\n#grad1 {\n height: 200px\n\tbackground-color: red \/* \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u65f6\u663e\u793a *\/\n background-image: linear-gradient(#e66465, #9198e5)\n}\n<\/style>\n<\/head>\n<body>\n\n<h3>\u7ebf\u6027\u6e10\u53d8 - \u4ece\u4e0a\u5230\u4e0b<\/h3>\n<p>\u4ece\u9876\u90e8\u5f00\u59cb\u7684\u7ebf\u6027\u6e10\u53d8\u3002\u8d77\u70b9\u662f\u7ea2\u8272\uff0c\u6162\u6162\u8fc7\u6e21\u5230\u84dd\u8272\uff1a<\/p>\n\n<div id=\"grad1\"><\/div>\n\n<p><strong>\u6ce8\u610f\uff1a<\/strong> Internet Explorer 9 \u53ca\u4e4b\u524d\u7684\u7248\u672c\u4e0d\u652f\u6301\u6e10\u53d8\u3002<\/p>\n\n<\/body>\n<\/html>"
editor.getDoc().setValue(initCode)
submitTryit()
}
function submitTryit() {
var text = editor.getValue()
var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im
var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
var array_matches_head = patternHead.exec(text)
var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im
var array_matches_body = patternBody.exec(text)
var basepath_flag = 1
var basepath = ''
if (array_matches_head) {
text = text.replace('<head>', '<head>' + basepath)
} else if (patternHtml) {
text = text.replace('<html>', '<head>' + basepath + '</head>')
} else if (array_matches_body) {
text = text.replace('<body>', '<body>' + basepath)
} else {
text = basepath + text
}
var iframe = document.createElement("iframe")
iframe.setAttribute("frameborder", "0")
iframe.setAttribute("id", "iframeResult")
iframe.setAttribute("width", "100%")
document.getElementById("iframewrapper").innerHTML = ""
document.getElementById("iframewrapper").appendChild(iframe)
var ifrw = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument
ifrw.document.open()
ifrw.document.write(text)
ifrw.document.close()
autodivheight()
}
submitTryit()
autodivheight()
</script>
</html>
请采纳
参考如下：<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>更换单选按钮显示样式</title>
<style>
input[type='radio'].radio {opacity:0 display:inline-block height:20px }
label.radio {background:url(imgs/radio_check.png) no-repeat height:20px padding-left:25px}
input[type='radio'].radio:checked + .radio {background:url(imgs/radio_checked.png) no-repeat}
</style>
</head>
<body>
<input type="radio" name="gender" id="x" value="X"><label for="x">我要保密</label><br>
<input type="radio" name="gender" id="y" value="M"><label for="y">我是帅哥</label><br>
<input type="radio" name="gender" id="z" value="F"><label for="z">我是美女</label><br>
<input type="radio" name="sex" id="a" value="X" class="radio"><label for="a" class="radio">我要保密</label><br>
<input type="radio" name="sex" id="b" value="M" class="radio"><label for="b" class="radio" >我是帅哥</label><br>
<input type="radio" name="sex" id="c" value="F" class="radio"><label for="c" class="radio" >我是美女</label><br>
</body>
</html>
