JavaScript练习之 别踩白块

js设置css外部样式

js获取css外部样式参考代码：标签对象.currentStyle ? 标签对象.currentStyle : document.defaultView.getComputedStyle(标签对象, null);

具体详情参考链接：原生JS获取CSS样式并修改

获取并设置参数之外部样式，代码如下：

function getCurrentStyle(node) {
    var style = null;
    
    if(window.getComputedStyle) {
        style = window.getComputedStyle(node, null);
    }else{
        style = node.currentStyle;
    }
    return style;
}
var boxStyle=getCurrentStyle(box[0]);
boxTop=parseFloat(boxStyle.top);
console.log(boxTop);
box[0].style.cssText='top:'+(--boxTop)+'px;';
boxTop=parseFloat(boxStyle.top);
console.log(boxTop);

js添加、删除、替换节点

HTML代码：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

添加节点

js代码如下：

var para=document.createElement("p");

newBlock.setAttribute("name","blocks");		//向<p>元素添加属性

var node=document.createTextNode("这是新段落");
para.appendChild(node);	//向<p>元素追加这个文本节点

var element=document.getElementById("div1");
element.appendChild(para);

• 在指定元素前插入新节点
  方法：insertBefore()
  使用：document.getElementById("para").insertBefore(newItem,existingItem);

删除节点

js代码如下：

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);	//将子元素从父元素中删除

参考链接：[js添加和删除节点](https://www.cnblogs.com/zwn-lucky7/p/6624181.html)

替换节点

格式：replaceChild()
使用：父节.replaceChild(新节点，旧节点)

点击页面任何一处触发js事件

document.onclick

获取某个元素相对于视窗的位置

格式：标签对象.getBoundingClientRect()
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。
分别表示元素各边与页面上边和左边的距离。

对于js事假绑定很好的解释

参考链接：
js中事件绑定的几种方式

动态绑定关于匿名函数的解释

“别踩白块”(行内绑定事件)：

document.write("<button class=\"blocks\" name=\"blocks\" onmousedown=\"startAction(this)\"></button>");

"别踩白块"修改前代码(动态绑定事件)：

	 blocks[i].onmousedown=clickAction(this);

出现问题：未点击就执行代码。

"别踩白块"修改后代码(动态绑定事件)：

blocks[i].onmousedown=function(){
			clickAction(this);
		}

参考链接：
js 动态绑定一定要匿名函数吗

行内绑定点击事件this的指向

代码参考如下：

行内绑定事件：

onclick="clickAction(this)"

函数代码：

 function clickAction(dom){
    	alert(dom.getAttribute("id")+ ' '+dom.getAttribute("name"));
    }

取消button在点击后出现的默认蓝色边框

解决：设置button样式代码 outline:none;

奇怪的布局和定时器组合

定时器不改变的情况下，选择float:left;页面更新较慢，而使用display:inline-block;明显画面速度加快。
原因不明。。。

inline-block间隙问题

已经不是第一次遇到这个问题了；整理一下解决方法。
让水平间隙消失：在父级上加font-size:0;
让垂直间隙消失：在子元素上加vertical-align:bottom;

别踩白块代码：display:inline-block;
效果如下：

别踩白块修改代码：

	display:inline-block;
	vertical-align:bottom;

效果如下：