JavaScript HTML DOM(二)

来源：互联网发布：网络电影市场编辑：程序博客网时间：2024/06/02 02:15

基本点击事件

<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>

阅读全文

0 0