DOM事件--操作元素小例子

最新推荐文章于 2024-06-09 20:17:27 发布

Ystay_123

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量163

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44739478/article/details/109232417

版权

1.修改元素属性

	此例通过DOM来改变img元素的src属性和title属性：有两个按钮：苹果和石榴，点击苹果按钮变成苹果照片，点击石榴按钮变成石榴照片，并且鼠标移上图片的title也改变

代码：

 <body>
    <button id="apple">苹果</button>
    <button id="shiliu">石榴</button>
    <hr>
    <img src="1.jpg" title="苹果">
</body>
<script>
      //修改元素属性 src
      //1.获取元素
      var lemo=document.getElementById("apple");
      var sl=document.getElementById("shiliu");
      var image=document.querySelector("img");
      //2.给获取的元素绑定事件处理程序
      sl.onclick=function(){
        image.src='2.jpg';
        image.title='石榴';
      }
      lemo.onclick=function(){
        image.src='1.jpg';
        image.title='苹果';
      }
</script>

效果：
在这里插入图片描述

2、密码框验证信息

	规定输入密码长度，不符合规范提升字色变红，符合规范字色变绿

代码：

<style>
    div{
        width: 600px;
        margin:100px auto;
    }
    .message {
        display: inline-block;
        font-size: 12px;
        color: #ccc;
        background: url(/mess.png) no-repeat left center;
        padding-left: 20px;
    }
    .wrong{
        color: red;
        background: url(/wrong.png);
    }
    .right{
        color: green;
        background: url(/right.png);
    }
</style>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
</body>
<script>
    var ipt=document.querySelector('.ipt');
    var message=document.querySelector('.message');
    //失去焦点绑定事件
    ipt.onblur=function(){
        if(this.value.length<6 || this.value.length>16){
            message.className='message wrong';
            message.innerHTML='您输入的位数不对要求6~16位';
        }else{
            message.className='message right';
            message.innerHTML='您输入正确！';
        }
    }
</script>

效果：

在这里插入图片描述

3、显示当前系统时间

代码：

	<body>
    <button>显示当前系统时间</button>
    <div></div>
    <script>
        //1.获取元素
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        // 注册事件
        btn.onclick = function(){
            div.innerText = getDate();
        }
        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是：'+year+'年'+month+'月'+dates+'日'+arr[day];
        }
    </script>
</body>

效果图：
点击按钮后：
在这里插入图片描述

Ystay_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件--操作元素小例子

1.修改元素属性此例通过DOM来改变img元素的src属性和title属性：有两个按钮：苹果和石榴，点击苹果按钮变成苹果照片，点击石榴按钮变成石榴照片，并且鼠标移上图片的title也改变代码： <body> <button id="apple">苹果</button> <button id="shiliu">石榴</button> <hr> <img src="1.jpg" title="
复制链接

扫一扫