<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript</H2>
<div id="txt">
<h5>------------H5------------</h5>
<p>1. JavaScript</p>
<p>2. PHP</p>
<p>3. C++</p>
<p>4. Vue.js</p>
</div>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="changeColor()">
<input type="button" value="改变宽高" onclick="changeWidthAndHeight()">
<input type="button" value="隐藏内容" onclick="disapearTxt()">
<input type="button" value="显示内容" onclick="apeartxt()">
<input type="button" value="取消设置" onclick="cancel()">
</form>
<script type="text/javascript">
var _h2=document.getElementById("con");
var _div=document.getElementById("txt");
//定义"改变颜色"的函数
function changeColor()
{
var changeVlue1=prompt('您要把h2它变成什么颜色？');//_h2
var _h2Color=confirm("您确定吗？");
if(_h2Color==true||changeVlue1!=null)
{
_h2.style.color=changeVlue1;
}
var changeVlue2=prompt('您要把div变成什么颜色？');//_div
var _divColor=confirm("您确定吗？");
if(_divColor==true||changeVlue2!=null)
{
_div.style.color=changevlue2;
}
}
//定义"改变宽高"的函数
function changeWidthAndHeight()
{
var changeVlue1=prompt('您要把它变成多宽？');//_h2
var _h2Width=confirm("您确定吗？");
if(_h2Width==true||changeVlue1!=null)
{
_h2.style.width=changeVlue1;
}
var changeVlue2=prompt('您要把它变成多高？');//_h2
var _h2Height=confirm("您确定吗？");
if(_h2Height==true||changeVlue2!=null)
{
_h2.style.Height=changeVlue2;
}
var changeVlue3=prompt('您要把它变成多宽？');//_div
var _divWidth=confirm("您确定吗？");
if(_divWidth==true||changeVlue3!=null)
{
_div.style.width=changeVlue3;
}
var changeVlue4=prompt('您要把它变成多高？');//_div
var _divHeight=confirm("您确定吗？");
if(_divHeight==true||changeVlue4!=null)
{
_div.style.Height=changeVlue4;
}
}
//定义"隐藏内容"的函数
function disapearTxt()
{
var _h2None=confirm("您确定隐藏h2吗？");
if(h2None==true)
{
_h2.style.display="none";
}
var _divNone=confirm("您确定隐藏div吗？");
if(_divNone==true)
{
_div.style.display="none";
}
}
//定义"显示内容"的函数
function apear()
{
var _h2Block=confirm("您确定模块化显示h2吗？");
if(_h2Block==true)
{
_h2.style.display="block";
}
var _divBlock=confirm("您确定模块化显示div吗？");
if(_divBlock==true)
{
_div.style.display="block";
}
}
//定义"取消设置"的函数
function cancel()
{
var _cancel= confirm("是否取消设置？");
if( _cancel == true)
{
_h2.removeAttribute("style");
_div.removeAttribute("style");
}
}
</script>
</body>
</html>
显示函数应该是apeartxt写错了