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

前言

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

任务目的

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

任务描述

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

DEMO

项目地址

实现

思路

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

但是这里主要有2个问题

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

问题

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

1. style-可读可写
   使用style属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了

var box = document.querySelector('.box')

box.style.transform //  "" 为空字符串，无法获取非style的CSS属性值

2. getComputedStyle-可读不可写
   使用getComputedStyle可以读取元素最终的CSS属性值，但是无法设置。

let elem = document.getElementById("elem-container");

let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
// window.getComputedStyle(elem,null).height;
// getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称）

3. 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操作样式