JS实现点击改变元素背景色Demo

作者: 媛媛ing | 来源:发表于2017-06-22 14:46 被阅读749次

从此踏上了HTML5的学习之路。以下是一个小demo,不足之处多多指教。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>换背景</title>
<style type="text/css">
    li{
        background: red;
        height: 40px;
        line-height: 40px;
    }
</style>
</head>
<body>
    <ul>
        <li>从此以后</li>
        <li>你</li>
        <li>就是我的了</li>
    </ul>

    <script type="text/javascript">
        var ul = document.getElementsByTagName("ul")[0];
        var li = document.getElementsByTagName("li");
        ul.onclick= function(e){

            for (var i = 0; i < li.length; i++) {
                li[i].style.background = "red";
            }

            var temp = e.srcElement;
            temp.style.background= "green";
        }
    </script>
</body>
</html>

复制代码即可看到效果。onclick 事件也可换成onmouseover等事件,实现不同的效果。

我的文章很简单,不求打赏,但求喜欢。

相关文章

  • JS实现点击改变元素背景色Demo

    从此踏上了HTML5的学习之路。以下是一个小demo,不足之处多多指教。 复制代码即可看到效果。onclick 事...

  • js 实现button按钮点击改变背景色

    需求:当点击button按钮时,按钮的颜色改变,再次点击时,颜色还原。 最终效果图: 代码:

  • js与jquery方法对比

    一.文档就绪 jquery实现 简写形式为: js实现 二、元素选择 三、点击事件 jquery实现 js实现 四...

  • vue写页码

    用引入vue.js的方法做页码 实现效果请见:demo点击 下载源码

  • jQuery与js常用方法对比

    (一)文档就绪 jQuery实现 或简写为 js实现 (二)元素选择 (三)点击事件 (四)元素显示和隐藏 jQu...

  • 链接跳转(附加样式)

    下面的例子,不仅实现了跳转,还实现了样式效果。 当点击链接时,跳转到相应元素并附加背景色。是个常用的功能。

  • 使用jQuery.animate实现弹幕飘窗效果,在各老式机型中

    点击查看demo 在使用js setInterval函数实现时,在老式android机型中,出现严重顿挫感,在ip...

  • js学习笔记

    1.js对事件的响应 点击 2.改变html元素内容 function test(){alert('你好');do...

  • html

    target="_blank: 点击后跳出新页面 href = "#demo1" 跳到id为demo1的元素 元素...

  • 点击图片弹出大图

    点击图片弹出大图demo源码 大体步骤: 获取图片元素,监听点击事件 点击后获取到点击图片的 src 生成 元素,...

网友评论

本文标题:JS实现点击改变元素背景色Demo

本文链接:https://www.haomeiwen.com/subject/iarfcxtx.html