每月笔记（2019-9）

希望每天都能记录一些项目中的东西，笨鸟先飞。

9-17

svg的使用

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/link"  version='1.1'>
	<use xmlns:xlink="http://www.w3.org/1999/link" xlink:href="#shop">
	</use>
	<ellipse cx='26' cy='26' rx='1' ry='1' style='fill:#ddd; stroke:none;'>
	</ellipse>
</svg>

下方的解释，都是固定格式，未找到具体原因，先记住：
xmlns：svg的名称空间
xmlns：xlink：可以使用它的特性
version： svg的版本号
stroke：线的颜色
sroke-width：线的宽度

雪碧图在项目中的使用

background: url(../x.png) no-repeat 0 0;
background-size: 1.0rem 1.0rem;

:style="{backgroundPositionY:-(posY%7)*2.5 + 'rem'}"

解释：
通过background-size和rem的结合可以更方便。

动画的使用

@ keyframes load {
0%  	{transform:translateY(0px)}
50%  	{transform:translateY(150px)}
100%  	{transform:translateY(0px)}
}

animate: load .6s infinate easy-in-out;

9-25

attribute和properties的区别
attr： html的属性
prop： dom的属性，也可理解是javascript对象的属性
前者和后者几乎是一一对应的，除class外。
value比较特殊，一般prop和attr一致，如果单独修改了prop则和attr不一致。
defaultValue和value、id在prop和attr是一一对应的。

document.getElementById("myBtn").attributes.type.value
document.getElementById("myBtn").type

scrollHeight：最高高度
clientHeight：可见高度（padding）
offsetHeight：（padding、border、水平滚动条、不包括margin）
scrollTop：顶部偏移
offsetTop: 父元素

9-26

获取scrollTop为0（DOCTYPE的原因）：

//获得页面向左、向上卷动的距离
function getScrollTop(el) {
  // return {
  //   left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
  //   top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
  // };

  if(el === document.body){
    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  } else {
    return el.scrollTop
  }
}