小Tip 之对角线移动方块位置

最新推荐文章于 2022-07-05 09:46:25 发布

天株

最新推荐文章于 2022-07-05 09:46:25 发布

阅读量634

点赞数

本文链接：https://blog.csdn.net/u013551707/article/details/35992077

版权

一、碎碎念：听起来很简单的题目，如图：

当点击蓝色的小方块之后，使其位置发生变化，右左上角变到右下角，并且使其颜色发生改变。

二、分析：一共就两个变化：

1、改变颜色

2、变化位置

三、思路：设置两个class（类名），一个id。使用background-color来改变颜色，使用position属性来进行定位。

四、代码如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;}
#div1{
    width:100px;
    height:100px;
}
.div1{
    background-color:#000875;    
}
.div2{
    background-color:red;
    position:absolute;
    bottom:0;
    right:0;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
    var dd=document.getElementById("div1");
    //console.log(dd.style);
    dd.addEventListener("click",function(){
        dd.className="div2";
    },false);
    
}
</script>
</head>
<body>   
    <div id="div1" class="div1">
    </div>
</body>
</html>

效果图：

五、总结：我最开始听到这个题目首先想到的是利用边距等等各种奇葩的想法，实际上就是把问题复杂化了，因为现实中我一般用不到这样的效果，又觉得这样的题目很简单，没有认真的思考过这样的问题。现在回想，当时略2呀~小问题也是问题，so，不要懒惰哟~