The opening words
Anything that is not in the hands of the obtained knowledge, not yours.
Any knowledge obtained do not often use review, nor is it yours.
Record Origin
Pull the ads feature to be encountered in a "natural" feel of usage, slowly before the investigation is to obtain a high degree of elements there is a problem, the problem of memory in the book or seen the video, with Xu Jiumei, when used on granted. Decided depth analysis of usage, increased memory, the recording was released that also give you front-end counterparts, learners increase impression.
Wrong place
Adhering to the structure, style, behavior separation purposes, regardless of the size of each case are written in html, css, js separately. This, too, throwing bricks brings me to my mistakes jade.
Original css:
Js get the original DOM element height:
var adcon = document.getElementById('adcon');
var maxH = parseInt(adcon.style.height);
So after it was found written on the console:
The return value is NaN. Orz ...
Investigation and error to find out why
Write an example to test:
A close look CSSStyleDeclaration find the corresponding height value is empty
So you know why the return NaN.
That is why "," the hundred valleys look at test found that:
This test.style.xxxvalue can only get here is the label element style inline value.
This means that if write:
CSSStyleDeclaration years will include:
In this way you will get to value:
Expansion needs a solution, to find the optimal method under various environments
About native JS taken dom element wide high way, I summarized the following five ways, omission of hope netizens proposed, thank you ~
- window.getComputedStyle (dom element, a 'pseudo-class'). attribute name
- dom element .clientHeight / clientWidth
- dom element .offsetHeight / offsetWidth
- dom element .scrollHeight / scrollWidth
- dom element .style.height / width
Handle and a spout lip off, directly on the codes to explain:
getComputedStyle () method
This method is read-only, explain in detail the specific syntax and applications can be found in this Zhangxin Xu Gangster: Portal
Thus, this method is to obtain value content content area value, regardless of the padding, margin and border.
dom element .clientHeight / clientWidth Method
This is seen + content area vertical padding value.
dom element .offsetHeight / offsetWidth
This is seen + two + two border content area padding value
dom element .style.height / width
This began analyzed, and made within elements of the row height value for the style ( value content area )
dom element .scrollHeight / scrollWidth
I added a lot of content for example, scroll bars:
Test Results:
Thus, scrollHeight method returns or + content area two padding content value.
scrollWidth method returns the total width of the body content
These are the real test by scoring out of the conclusion personally I think that a large dry than see the text easier to understand. The next mistake will not be met in actual combat.
A white, pale face record, if any errors, suggestions, omissions, kindly pointed out.