步骤
1
:
隐藏和显示
步骤
2
:
改变背景色
步骤
3
:
步骤
4
:
通过给元素的style.display 赋值，改变显示还是隐藏
");
window.frames["iframe_show2934"].document.write(decodeHtml($("textarea#stepcodeTextarea2934").val()));
window.frames["iframe_show2934"].document.close();
$(window.frames["iframe_show2934"]).load(function(){
$("#iframe_show2934").height($("#iframe_show2934").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2934").height($("#iframe_show2934").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
");
window.frames["iframe2934"].document.write(decodeHtml(code2934));
window.frames["iframe2934"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2934"]).load(function(){
$("#iframe2934").height($("#iframe2934").contents().find("body").height()+showittryitheight);
});
$("#iframe2934").height($("#iframe2934").contents().find("body").height()+showittryitheight);
alreadyWriteCode2934 = code2934;
$("#rendering2934").hide();
$("#rendered2934").show();
}
var tRereshRetry2DemoPanel2934 = setInterval(rereshRetry2DemoPanel2934,1000);
var binded2934 = false;
$("textarea#stepcodeTextarea2934").keyup(function(){
if(!binded2934){
$(window).bind('beforeunload',function(){
binded2934 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2934 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2934!=newCode){
// window.frames["iframe2934"].document.write("
");
// window.frames["iframe2934"].document.write(decodeHtml($("textarea#stepcodeTextarea2934").val()));
// window.frames["iframe2934"].document.close();
// $(window.frames["iframe2934"]).load(function(){
// $("#iframe2934").height($("#iframe2934").contents().find("body").height()+showittryitheight);
// });
// code2934 = newCode;
// }
});
$(".tryButton2934").click(function(){
$("#tryDiv2934").show();
$("#stepcodeTextarea2934").focus();
$("#stepcodeTextarea2934").height(200);
$("#iframe2934").height(0);
window.frames["iframe2934"].document.write("
");
window.frames["iframe2934"].document.write(decodeHtml($("textarea#stepcodeTextarea2934").val()));
window.frames["iframe2934"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2934"]).load(function(){
$("#iframe2934").height($("#iframe2934").contents().find("body").height()+showittryitheight);
});
$("#iframe2934").height($("#iframe2934").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2934.focus();
editor2934.setSize(null, "250");
$("#rendering2934").hide();
$("#rendered2934").hide();
});
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 editor2934 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2934"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2934.on("change",function(doc){
if(!binded2934){
$(window).bind('beforeunload',function(){
binded2934 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2934 = newCode;
$("textarea#stepcodeTextarea2934").val(newCode);
if(alreadyWriteCode2934!=code2934){
lastModifedTime2934 = new Date().getTime();
$("#rendering2934").show();
$("#rendered2934").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2934 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2934.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2934").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
通过给元素的
style.backgroundColor 赋值，修改样式
你也许注意到了style.backgroundColor 这里的
backgroundColor 和
css中的背景色background-color 是有所不同的
换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，这是很累赘的事情。
最好能够通过
CSS 的属性名，直接就进行修改了。比如通过这样的方式：
这样就仅仅需要使用CSS原本的属性名即可了。
Javascript并不提供这样的解决方案，但是到了
JQuery 就提供了这样的解决方案,请参考
通过JQuery设置CSS
");
window.frames["iframe_show1198"].document.write(decodeHtml($("textarea#stepcodeTextarea1198").val()));
window.frames["iframe_show1198"].document.close();
$(window.frames["iframe_show1198"]).load(function(){
$("#iframe_show1198").height($("#iframe_show1198").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1198").height($("#iframe_show1198").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<div id="d1" style="background-color:pink">Hello HTML DOM</div>
<button onclick="change()">改变div的背景色</button>
<script>
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";
}
</script>
<div id="d1" style="background-color:pink">Hello HTML DOM</div>
<button onclick="change()">改变div的背景色</button>
<script>
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";
}
</script>
");
window.frames["iframe1198"].document.write(decodeHtml(code1198));
window.frames["iframe1198"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1198"]).load(function(){
$("#iframe1198").height($("#iframe1198").contents().find("body").height()+showittryitheight);
});
$("#iframe1198").height($("#iframe1198").contents().find("body").height()+showittryitheight);
alreadyWriteCode1198 = code1198;
$("#rendering1198").hide();
$("#rendered1198").show();
}
var tRereshRetry2DemoPanel1198 = setInterval(rereshRetry2DemoPanel1198,1000);
var binded1198 = false;
$("textarea#stepcodeTextarea1198").keyup(function(){
if(!binded1198){
$(window).bind('beforeunload',function(){
binded1198 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1198 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1198!=newCode){
// window.frames["iframe1198"].document.write("
");
// window.frames["iframe1198"].document.write(decodeHtml($("textarea#stepcodeTextarea1198").val()));
// window.frames["iframe1198"].document.close();
// $(window.frames["iframe1198"]).load(function(){
// $("#iframe1198").height($("#iframe1198").contents().find("body").height()+showittryitheight);
// });
// code1198 = newCode;
// }
});
$(".tryButton1198").click(function(){
$("#tryDiv1198").show();
$("#stepcodeTextarea1198").focus();
$("#stepcodeTextarea1198").height(200);
$("#iframe1198").height(0);
window.frames["iframe1198"].document.write("
");
window.frames["iframe1198"].document.write(decodeHtml($("textarea#stepcodeTextarea1198").val()));
window.frames["iframe1198"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1198"]).load(function(){
$("#iframe1198").height($("#iframe1198").contents().find("body").height()+showittryitheight);
});
$("#iframe1198").height($("#iframe1198").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1198.focus();
editor1198.setSize(null, "250");
$("#rendering1198").hide();
$("#rendered1198").hide();
});
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 editor1198 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1198"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1198.on("change",function(doc){
if(!binded1198){
$(window).bind('beforeunload',function(){
binded1198 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1198 = newCode;
$("textarea#stepcodeTextarea1198").val(newCode);
if(alreadyWriteCode1198!=code1198){
lastModifedTime1198 = new Date().getTime();
$("#rendering1198").show();
$("#rendered1198").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1198 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1198.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1198").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
");
window.frames["iframe_show2937"].document.write(decodeHtml($("textarea#stepcodeTextarea2937").val()));
window.frames["iframe_show2937"].document.close();
$(window.frames["iframe_show2937"]).load(function(){
$("#iframe_show2937").height($("#iframe_show2937").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2937").height($("#iframe_show2937").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
代码比较
复制代码
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table id="t">
<tr >
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr >
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr >
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr >
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr >
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
<script>
var trs = document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
if(1==i%2)
trs[i].style.backgroundColor='#f8f8f8';
}
</script>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table id="t">
<tr >
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr >
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr >
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr >
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr >
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
<script>
var trs = document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
if(1==i%2)
trs[i].style.backgroundColor='#f8f8f8';
}
</script>
");
window.frames["iframe2937"].document.write(decodeHtml(code2937));
window.frames["iframe2937"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2937"]).load(function(){
$("#iframe2937").height($("#iframe2937").contents().find("body").height()+showittryitheight);
});
$("#iframe2937").height($("#iframe2937").contents().find("body").height()+showittryitheight);
alreadyWriteCode2937 = code2937;
$("#rendering2937").hide();
$("#rendered2937").show();
}
var tRereshRetry2DemoPanel2937 = setInterval(rereshRetry2DemoPanel2937,1000);
var binded2937 = false;
$("textarea#stepcodeTextarea2937").keyup(function(){
if(!binded2937){
$(window).bind('beforeunload',function(){
binded2937 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2937 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2937!=newCode){
// window.frames["iframe2937"].document.write("
");
// window.frames["iframe2937"].document.write(decodeHtml($("textarea#stepcodeTextarea2937").val()));
// window.frames["iframe2937"].document.close();
// $(window.frames["iframe2937"]).load(function(){
// $("#iframe2937").height($("#iframe2937").contents().find("body").height()+showittryitheight);
// });
// code2937 = newCode;
// }
});
$(".tryButton2937").click(function(){
$("#tryDiv2937").show();
$("#stepcodeTextarea2937").focus();
$("#stepcodeTextarea2937").height(200);
$("#iframe2937").height(0);
window.frames["iframe2937"].document.write("
");
window.frames["iframe2937"].document.write(decodeHtml($("textarea#stepcodeTextarea2937").val()));
window.frames["iframe2937"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2937"]).load(function(){
$("#iframe2937").height($("#iframe2937").contents().find("body").height()+showittryitheight);
});
$("#iframe2937").height($("#iframe2937").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2937.focus();
editor2937.setSize(null, "250");
$("#rendering2937").hide();
$("#rendered2937").hide();
});
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 editor2937 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2937"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2937.on("change",function(doc){
if(!binded2937){
$(window).bind('beforeunload',function(){
binded2937 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2937 = newCode;
$("textarea#stepcodeTextarea2937").val(newCode);
if(alreadyWriteCode2937!=code2937){
lastModifedTime2937 = new Date().getTime();
$("#rendering2937").show();
$("#rendered2937").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2937 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2937.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2937").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
查看答案
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
Or
姿势不对,事倍功半!