SOURCE

document.getElementById("p1").style.color="red";
function hidden(){
  document.getElementById('p1').style.visibility='hidden';
}
function show(){
  document.getElementById("p1").style.visibility="visible";
}
function mOver(obj){
  obj.innerHTML="Thanks";
}
function mOut(obj){
  obj.innerHTML="鼠标在上面";
}
function mUp(obj){
  obj.innerHTML="你松开了鼠标";
  obj.style.background="green";
}
function mDown(obj){
  obj.style.background="red";
  obj.innerHTML="你按住了鼠标";
  
}
function fu(obj){
  obj.style.background="red";
}

<p class="p1" id="p1">文字</p>
<button onclick="document.getElementById('p1').style.visibility='hidden'">hidden</button>
<button onclick="show()">show</button>
<div onmouseup="mUp(this)" onmousedown="mDown(this)" style="background-color:green;width:120px;height:20px;padding:40px; color:#fff"></div>
<input type="text" onfocus="fu(this)" />

.p1{
  font-size:100px;
}