【JavaScript】003.提取行间事件

最新推荐文章于 2021-05-01 23:38:14 发布

Spade_

最新推荐文章于 2021-05-01 23:38:14 发布

阅读量165

点赞数 3

分类专栏： JavaScript 文章标签： js javascript html5

本文链接：https://blog.csdn.net/Spade_/article/details/105902256

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.目的

为两个button添加单击事件实现换肤功能
在这里插入图片描述

2.示例代码

图片及源码的github链接
003.提取行间事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>003.提取行间事件</title>
    <script type="text/javascript">
        window.onload = function () {
            // 为两个button添加单击事件实现换肤功能
            var oBtn = document.getElementById("btn1");

            oBtn.onclick = fnChange;
            function fnChange() {
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            }

            // 匿名函数
            var oBtn2 = document.getElementById("btn2");
            oBtn2.onclick = function(){
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "green";
                oDiv.style.fontSize = "50px";
            }

        }
    </script>
</head>
<body>
    <div id="div1" onclick="fnMyalert()">这是一个div元素</div>
    <input type="button" id="btn1" name="" value="改变div样式">
    <input type="button" id="btn2" name="" value="改变div样式2">
</body>
</html>

Spade_

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】003.提取行间事件

1.目的为两个button添加单击事件实现换肤功能2.示例代码图片及源码的github链接 003.提取行间事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>003.提取行间事件</title> &...
复制链接

扫一扫