后台管理模板笔记

最近在公司接手公司后端模板的任务，于是从网上下载了模板作为参考，并记录一些有用的知识。

CSS 部 分

• css3属性-webkit-font-smoothing，兼容写法：
  -webkit-font-smoothing: antialiased; /*chrome、safari*/ -moz-osx-font-smoothing: grayscale;/*firefox*/

它有三个值：

value	none	subpixel-antialiased	antialiased
值	对低像素的文本比较好	默认值	抗锯齿很好

• text-transform 属性控制文本的大小写;

value	none	capitalize	uppercase	lowercase	inherit
值	默认	每个字母大写	大写字母开头	小写字母开头	继承父级属性

• font书写规则
  font-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;
  font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;
  font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;
  font-weight (字体浓淡): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;
  font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12px，12pt，120%，1em
  顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
  栗子:
  //14px/1:字体大小和行高的合写 .font{ font:normal normal normal 14px/1 'Material-Design-Iconic-Font'; }

• 文本渲染属性 text-rendering
  text-rendering属性是一个SVG属性，且目前只支持谷歌和火狐浏览器。其值如下：
  1.auto：当绘制文本时，浏览器会进行智能识别，何时应该从速度、清晰度和几何精度方 面进行优化。
  2.optimizeSpeed：当绘制文本时，浏览器会着重渲染速度，而不是清晰度和几何精度。
  3.optimizeLegibility：当绘制文本时，浏览器会侧重文本的可读性（清晰度），而不是渲染速度和几何 精度。
  4.geometricPrecision：当绘制文本时，浏览器会着重几何精度，而不是清晰度和渲染速度。

  JS 部 分

1. appendChild、insertBefore和insertAfte

• appendChild用法
  target.appendChild(newChild)
  newChild作为target的子节点插入最后的一子节点之后

• insertBefore用法
  target.insertBefore(newChild,existingChild)
  newChild作为target的子节点插入到existingChild节点之前 existingChild为可选项参数，当为null时其效果与appendChild一样

• insertAfter用法
  *JS本身是没有这个方法的 *，但是可以通过insertBefore来创造出来
  function insertAfter(newEl, targetEl) { var parentEl = targetEl.parentNode; if(parentEl.lastChild == targetEl) { parentEl.appendChild(newEl); }else { parentEl.insertBefore(newEl,targetEl.nextSibling); }

总结：

1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数
2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。
3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点

---

2.getComputedStyle与currentStyle获取样式(style/class)

通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了

全局方法 *getComputedStyle *:

获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距,但是存在兼容性，IE浏览器不识别此方法。

IE方法 *currentStyle *:

兼容写法：

return window.getComputedStyle?window.getComputedStyle(obj,null).paddingLeft :obj.currentStyle.paddingLeft;