新出现的问题：
同样的代码，但我每次都发现，我刷新这个页面时，浏览器中的标签总是显示活动圆圈，有什么问题，谢谢！我使用iframe，但我在stackoverflow中搜索，有类似的问题，他使用js生成iframe。但我在下面的代码中这样做了。我只是没有成功
老问题解决了：我的问题集中在以下几行：
textarea.style.color = '#C5C8C6';
//textarea.style.color = rightL.dataset.brown;//甚至这也不起作用：textarea.style.color=rightL.getAttribute（'data-brown'）；`
当我使用时
`textarea.style.color = '#C5C8C6',
它有效，但当我使用html5方式时：
//textarea.style.color = rightL.dataset.brown;`
它不起作用，我不知道为什么，请帮忙，谢谢。我用的是克罗姆布鲁尔。
所有代码都在上面：
//HTML
<div class="grid_section second_grid">
<div class="tabs_section" >
<ul class="tabs_section_main_header">
<li class="component_tab active">{{'Untitled'}}</li>
<li class="component_tab active rightL" data-white = 'rgb(157, 190, 140)'>乳白</li>
<li class="component_tab active rightR" data-brown = '#C5C8C6'>舒棕</li>
</ul>
<ul class="tabs_section_main_content">
<li class="component_tab_content">
<textarea id="textarea">@if(isset($code)) {{$code}} @endif</textarea>
</li>
</ul>
</div>
</div>
//JS-
(function(){
//generate iframe using js before any js code
function createIframe(){
var i = document.createElement("iframe");
i.id = "iFrame";
i.contentEditable = "true";
document.getElementsByClassName("iframe")[0].appendChild(i);
};
createIframe();
//all the vars
var iframeOuterDiv = document.getElementsByClassName('iframe')[0];
var iFrame = document.getElementById("iFrame");
var iframeContent = iFrame.contentWindow;
var textarea = document.getElementById("textarea");
var body = document.getElementsByClassName('playCode')[0];
var playIcon = document.getElementsByClassName('play')[0];
var editMode = document.getElementsByClassName('editMode')[0];
var instantIcon = document.getElementsByClassName('instant')[0];
var rightL = document.getElementsByClassName('rightL')[0];
var rightR = document.getElementsByClassName('rightR')[0];
//show html code
runCode.count = 0;
function runCode() {
if(textarea.value=="" && runCode.count==0){
iframeContent.document.writeln('请输入要运行的代码');
runCode.count++;
return false;
}
iframeContent.document.open('text/html', 'replace');
iframeContent.document.writeln(textarea.value);
iframeContent.document.close();
}
runCode();
//addeventlistener code, first Check for browser support of event handling capability
function addEve(target,myAction){
if (window.addEventListener){
if(myAction === 'mouseover'){
target.addEventListener(myAction, function(){
body.classList.add('action');
}, false);
}else if(myAction === 'click'){
if(target === editMode){
editMode.addEventListener(myAction, function(e){
e.preventDefault();
body.classList.toggle('action');
},false);
}else if(target === playIcon){
playIcon.addEventListener(myAction, function(e){
e.preventDefault();
runCode();
},false);
}else if(target === instantIcon){
instantIcon.addEventListener(myAction, function(e){
e.preventDefault();
textarea.addEventListener('input', function(){
runCode();
});
},false);
}else if(target === rightR){
rightR.addEventListener(myAction, function(e){
e.preventDefault();
textarea.style.color = 'rgb(157, 190, 140)';
//textarea.style.color = rightL.dataset.white;`
//or even this did not work: textarea.style.color = rightL.getAttribute('data-white');`
});
}else if(target === rightL){
rightL.addEventListener(myAction, function(e){
e.preventDefault();
textarea.style.color = '#C5C8C6';
// rightL.getAttribute('data-brown');
});
}
}
}else if(window.attachEvent){
if(myAction === 'mouseover'){
target.attachEvent('on' + myAction, function(){
body.classList.add('action');
}, false);
}else if(myAction === 'click'){
playIcon.attachEvent('on' + myAction, function(e){
e.preventDefault();
runCode();
//playIcon.style.color = 'red';
});
editMode.attachEvent('on' + myAction, function(e){
e.preventDefault();
body.classList.toggle('action');
});
}
}
}
addEve(editMode, 'click');
addEve(playIcon, 'click');
addEve(iFrame,'mouseover');
addEve(instantIcon, 'click');
addEve(rightL, 'click');
addEve(rightR, 'click');
}());
您的代码似乎运行良好。混淆似乎是围绕着rightL和rightR以及数据白色与data棕色的命名。如果你把右L改为右R，这对我有效。所以下面这两个都有效。。。
rightR.getAttribute('data-brown')
rightL.getAttribute('data-white')