zoukankan      html  css  js  c++  java
  • 事件类型(onchange)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>事件类型(onchange)</title>
        <!-- 
            n.onchange=代码a;元素n的值发生变化时执行代码a;
            扩展知识:
            a.options: 可返回a元素中所有 <option> 的一个数组。
            a.selectIndex: 可设置或返回下拉列表a中被选选项的索引号
         -->
        <script>
            window.onload=function (){  //页面加载完成后执行函数
                var a=document.getElementById("sel");   //获取下拉列表
                a.onchange=function (){     //下拉列表发生变化时执行函数
                    //var val=this.value;   //可以用此方法获取下拉列表中每个选项的value
                    var val=a.options[a.selectedIndex].value;//也可以用此方法获取下拉列表中每个选项的value
                    document.body.style.background=val;//给body设置背景颜色,颜色值为下拉框选项的value
                }
            }
        </script>
    </head>
    <body>
        <span>请选择页面颜色:</span>
        <select id="sel">
            <option value="white" selected>请选择</option>
            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="blue">蓝色</option>
        </select>
    </body>
    </html>
  • 相关阅读:
    Vue 常用指令
    Vue起飞前的准备
    Django ORM 高性能查询优化
    Django 缓存、序列化、信号
    关于Django ModelForm渲染时间格式问题
    Django自定义分页并保存搜索条件
    Docker容器中用户权限管理
    Linux三种SSH协议登陆方式
    Docker部署Nextcloud私有网盘
    Zabbix官方部署搭建
  • 原文地址:https://www.cnblogs.com/vinson-blog/p/12077512.html
Copyright © 2011-2022 走看看