css經常使用操做

獲取元素寬高

一、只能獲取內聯樣式

var ele = document.getElementById('element');
console.log(ele.style.width); // 空字符串
console.log(ele.style.height); // '100px'

二、可獲取實時的style

MDN資料

var ele = document.getElementById('element');
console.log(window.getComputedStyle(ele).width); // '100px'
console.log(window.getComputedStyle(ele).height); // '100px'

三、Element.currentStyle.width/height

功能與第二點相同，只存在於舊版本IE中(IE9如下)，除了作舊版IE兼容，就不要用它了。

四、除了可以獲取寬高，還能獲取元素位置等信息

MDN資料

var ele = document.getElementById('element');
console.log(ele.getBoundingClientRect().width); // 100
console.log(ele.getBoundingClientRect().height); // 100

取整

1.取整

1.  // 丟棄小數部分,保留整數部分
2.  parseInt(5/2)　　// 2

2.向上取整

1.  // 向上取整,有小數就整數部分加1
2.  Math.ceil(5/2)　　// 3

3.向下取整

1.  // 向下取整,丟棄小數部分
2.  Math.floor(5/2)　　// 2

4四捨五入

1.  // 四捨五入
2.  Math.round(5/2)　　// 3

取餘

1.  // 取餘
2.  6%4　　// 2