Common operations of CSS

Time:2020-10-22

Get element width

1. Only inline styles can be obtained

var ele = document.getElementById('element');
console.log ( ele.style.width ); // empty string
console.log(ele.style.height); // '100px'

2. Real time style

MDN data

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

3、Element.currentStyle.width/height

The function is the same as the second point. It only exists in the old version of IE (below IE9). In addition to making the old version of IE compatible, do not use it.

4. In addition to obtaining width and height, it can also obtain information such as element position

MDN data

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

Rounding

1. Rounding

1. // discard the decimal part and keep the integer part
2.  parseInt(5/2)  // 2

2. Round up

1. // round up and add 1 if there is a decimal
2.  Math.ceil(5/2)  // 3

3. Round down

1. // round down and discard the decimal part
2.  Math.floor(5/2)  // 2

4 rounding

1. // rounding
2.  Math.round(5/2)  // 3

Surplus

1. // surplus
2.  6%4  // 2

Recommended Today

What black technology does the real-time big data platform use behind the glory of the king?

Hello everyone, I’m Xu Zhenwen. Today’s topic is “Tencent game big data service application practice based on Flink + servicemesh”, which is mainly divided into the following four parts: Introduction to background and Solution Framework Real time big data computing onedata Data interface service onefun Microservice & servicemesh 1、 Introduction to the solution framework and […]