2017IFE-听指令的小方块（一）

前言

2017-百度前端技术学院编码任务：听指令的小方块（一）

任务目的

• 练习JavaScript在DOM、字符串处理相关知识
• 练习对于复杂UI，如何进行数据机构建模

任务描述

• 实现与 （点击查看） 实现一个类似棋盘的格子空间

DEMO

项目地址

实现

思路

设置小方块绝对定位，然后通过JS去控制它前进和转向。

但是这里主要有2个问题

• 复杂UI数据构造
  UI构造我是根据自己的DOM棋盘结构来封装构造函数。
• 小方块的动作设置。
  格子的动作分为前进和旋转2个动作，前进判断旋转角度后设置left或top的数值来实现前进，旋转通过改变方块CSS3 transform rotate的属性进行旋转角度。

问题

如何读写元素最终的CSS属性值呢？

1. style-可读可写
   使用style属性，仅仅只能获取和设置行内的样式，如果是通过内联