JavaScript HTML DOM(二)

• 基本点击事件

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

函数处理事件：

<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>

<h1 onclick="changetext(this)">点击文本!</h1>

函数的变换：显示当前的时间

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
//<em>指的是当前的字体显示为斜体
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

• 点击事件的后置

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
//通过getElementById给按钮增加点击函数
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>

• 自定义检测浏览器的cookie是否可用

<body onload="checkCookies()">

<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>

• 大小写的自动转换

<script>
function myFunction(){
    var x=document.getElementById("fname");
    //查找id
    x.value=x.value.toUpperCase();
    //将该部分的内容转换为大写
}
</script>

• 对鼠标移动的检测

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
//定义一个div框
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

• 颜色的改变—style

<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文本上</h1>