JavaScript HTML DOM(二)

最新推荐文章于 2024-05-12 23:25:55 发布

原创最新推荐文章于 2024-05-12 23:25:55 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

基础部分专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用HTML与JavaScript实现网页上的基本交互事件，包括点击事件、鼠标悬停事件等，并展示了如何通过函数处理这些事件来改变网页内容或样式。

基本点击事件

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