JavaScript HTML DOM(二)

最新推荐文章于 2023-04-16 09:40:54 发布

zero_1996

最新推荐文章于 2023-04-16 09:40:54 发布

阅读量299

点赞数

分类专栏：基础部分文章标签： javascript

本文链接：https://blog.csdn.net/zero_1996/article/details/73479949

版权

基础部分专栏收录该内容

27 篇文章 0 订阅

订阅专栏

基本点击事件

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

zero_1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript HTML DOM(二)

基本点击事件<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>函数处理事件：<script>function changetext(id){ id.innerHTML="Ooops!";}</script><h1 onclick="changetext(this)">点击文本!</h1>函数的变换：显示当前的时间<p>点击按钮执行 <em
复制链接

扫一扫

专栏目录