js小功能-涂色板



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            margin:0;
            padding:0;
        }
        li{
            box-sizing: border-box;/*边框加上宽高的大小一共是10px*/
            float: left;
            width:10px;
            height: 10px;
            border:1px solid black;
        }
        ul{
            list-style: none;
            width: 200px;
            height: 200px;
        }
    style>
head>
<body>
    <ul>
        <li img-date="0">li>
    ul>
    <script type="text/javascript">
    var ul = document.getElementsByTagName('ul')[0];

    ul.onmouseover = function(e){//鼠标滑过的事件
        var event = e || window.event;//解决浏览器兼容问题
        var target = event.target || event.srcElement;//事件绑定,target就是每一个li

        target.style.backgroundColor = "rgb(0,255," + target.getAttribute('img-date') + ")";
        target.setAttribute('img-date',parseInt(target.getAttribute('img-date')) + 50);
    }
script>
body>
html>

js小功能-涂色板_第1张图片

去掉边框:
js小功能-涂色板_第2张图片

你可能感兴趣的:(javaScript)