杂记(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
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()
方法实质就是输出这个值