前言
2017-百度前端技术学院编码任务：听指令的小方块（一）
任务目的
- 练习JavaScript在DOM、字符串处理相关知识
- 练习对于复杂UI，如何进行数据机构建模
任务描述
- 实现与 （点击查看） 实现一个类似棋盘的格子空间
实现
思路
设置小方块绝对定位，然后通过JS去控制它前进和转向。
但是这里主要有2个问题
- 复杂UI数据构造
UI构造我是根据自己的DOM棋盘结构来封装构造函数。 - 小方块的动作设置。
格子的动作分为前进和旋转2个动作，前进判断旋转角度后设置left或top的数值来实现前进，旋转通过改变方块CSS3transform rotate的属性进行旋转角度。
问题
如何读写元素最终的CSS属性值呢？
- style-可读可写
使用style属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了
var box = document.querySelector('.box')
box.style.transform // "" 为空字符串，无法获取非style的CSS属性值
- getComputedStyle-可读不可写
使用getComputedStyle可以读取元素最终的CSS属性值，但是无法设置。
let elem = document.getElementById("elem-container");
let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
// window.getComputedStyle(elem,null).height;
// getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称）
- CSSStyleSheet-对象可读可写
CSSStyleSheet类型表示通过<link>元素和<style>元素（注意这两种形式的都包括）包含的样式表，找到该元素CSSStyleRule对象，通过对style属性进行读写。
document.styleSheets; //StyleSheetList，集合
var sheet = document.styleSheets[0];
// 查看元素left
sheet.rules[9].style.getPropertyValue('left') // "80px"
// 设置元素left
sheet.rules[9].style.left = '120px'
参考链接
获取元素CSS值之getComputedStyle方法
获得div元素的translateY值
getComputedStyle
DOM系列---DOM操作样式
