杂记（animate方法实现元素居中）

1 动画实现margin:auto;

想要使用动画效果令元素居中，我首先反应到的是使用transition或者animate()方法，然而animate()只接受数值作为参数，即如

$("#div").animate({margin:'20px auto'},'slow')

是无效的，同样的使用transition这个CSS属性也是对于直接定义margin:20px auto;也是达不到预期想要的动画效果。
解决方法就是

• 通过JavaScript进行计算，把margin:20px auto;时的marginLeft数值给算出来
• 赋值于animate()方法，而且要添加animate()的回调函数用来真正定义margin:20px auto;

值得注意的是使用以下形式获取marginLeft数值有几个需要注意的地方：

var marginLeft = $('#div').css('width','20px auto').css('marginLeft');

第一个，这样读取数值的时候，元素样式也会随之改变，所以读取数据后还要进行样式还原才能赋值于animate()方法
第二个，为了兼容，常常使用jQuery1.8.3版本，当使用jQuery1.8.3版本时，使用以上方法读出的marginLeft值在不同浏览器会得出不同的数值，如Chrome得出的是正确的数值，而Firefox得出的是0px（使用高版本如3.2.1输出正常），IE8得出的是auto
那么如何解决第二个问题，首先我第一想法是舍弃jQuery，使用原生JavaScript来获取marginLeft，这里又有几个我理解不足的知识点了

2 style，getComputedStyle()以及currentStyle

参考网站：获取元素CSS值之getComputedStyle方法熟悉

2.1 style属性

JavaScript改变样式常常会使用到style属性，然而在读取方面使用style属性只能读取该元素的内联样式声明，而该元素在<sytle>元素或CSS文件中定义的样式并无法读取。

2.2 getComputedStyle()方法（IE9）

getComputedStyle()方法用于获取当前元素所有最终使用的CSS属性值，语法为：

var e = document.getElementById('abc');
alert(getComputedStyle(e).width);//getComputedStyle还可以接受伪类作为第二个参数

还有getProperValue()如：getComputedStyle(e)).getPropertyValue('width')，详情请看上面的参考网站

2.3 currentStyle属性

IE浏览器并不支持getComputedStyle()方法，它们使用特定的属性currentStyle属性，语法为：

var e = document.getElementById('abc');
alert(currentStyle(e).width);

还有getAttribute()如currentStyle(e).getAttribute('width')，详情请看上面的参考网站

---

所以最终的查询方法可以编写为：

var e = document.getElementById('abc');
alert((e.currentStyle ? e.currentStyle : getComputedStyle(e)).marginLeft)

但是使用原生的查询方法查询marginLeft，IE依旧输出auto，火狐依旧输出0px

3 innerWidth，outerWidth，clientWidth，offsetWidth

最后想出的办法是先求出改动元素当前的宽度以及当前浏览器的body相减除以二求出最后的marginLeft，这里又引出了一堆我的知识盲区。。

3.1 innerWidth与innerWidth()方法

JavaScript的innerWidth属性（IE8前版本不支持）只用于window对象（直接使用width无效），作用是求出浏览器宽度（包括滚动条，不包括工具栏）
而innerWidth()方法是jQuery的方法，作用是读取元素内容区宽度与内边距之和的数值

直接读取$(window).Width()可得出去除滚动条的浏览器宽度，注意输出为数字而不是字符串，使用css()方法输出称为字符串后缀px

3.2 outerWidth与outerWidth()方法

JavaScript的outerWidth属性（IE8前版本不支持）只用于window对象，作用是求出浏览器宽度（包括滚动条，包括工具栏）
而outerWidth()方法是jQuery的方法，作用是读取元素内容区宽度，内边距与边框长度之和的数值，若outerWidth()方法添加第二参数true，即读取元素内容区宽度，内边距，边框长度与外边距之和的数值

3.3 clientWidth属性

JavaScript的clientWidth属性，jQuery中的innerWidth()方法实质就是输出这个值

3.4 offsetWidth属性

JavaScript的offsetWidth属性，jQuery中的outerWidth()方法实质就是输出这个值