The method by which js gets the number of jason elements

js gets the number of json elements

An example of this article describes how js gets the number of jason elements. S hare it with you for your reference. Here's how to do it:

<script>
var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"}

function JSONLength(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
document.write("json对象的元素个数是："+JSONLength(keleyijson));
</script>

The effect is as follows:

The number of elements of the json object is: 3

JavaScript gets a summary of element size and size operations

This article summarizes several ways to use JavaScript to get the specified element size and location. I f you're using JQuery, getting element size is very simple. But we still need to know how to get it through native JavaScript, and the friends we need can refer to.

First, get the in-row style of the element

var obj = document.getElementById("test");
alert(obj.height + "\n" + obj.width);
// 200px 200px typeof=string只是将style属性中的值显示出来

Second, get the calculated style

var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

Note: If you do not set the width and height of the element, the default width and height is returned under the non-IE browser. Return the auto string below IE

Third, get the style written by the labels

var obj = document.styleSheets[0]; // [object StyleSheetList] 样式表的个数<link>var rule = null;// [object CSSRule]
if (obj.cssRules){
    rule = obj.cssRules[0];  // 非IE [object CSSRuleList]
} else {
    rule = obj.rules[0];     // IE [object CSSRuleList]
} 
alert(rule.style.width);

cssRules (or rules) can only get the width and height of the inline and link styles, not the inline and calculated styles.

Summary: The above three CSS methods to get the element size, can only get the CSS size of the element, but can not get the actual size of the element itself. For example, add margins, scroll bars, borders, and so on.

Four, get the actual size of the element

1. ClientWidth and clientHeight
This set of properties gets the size of the element's visual area, and the size of the element's content and the space occupied by the margins. T he element size is returned, but there are no units, the default unit is px, and if you force the units, such as 100em, it will still return the size of px. ( CSS gets it according to the style you set. ClientWidth and clientHeight understand the actual size of the element as follows:
a. Increase the border without change;
b. Increase the margin without change;
c. Increase the scroll bar, the final value is equal to the original size minus the size of the scroll bar;
d. Increase the margin, the final value is equal to the original size plus the size of the margin;

<div id="test"></div>
#test{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 5px red;  /* 对应a理解，结果：200,200 */
    margin: 10px;  /* 对应b理解，结果：200,200*/
    padding: 20px;  /* 对应c理解，结果：240,240*/
    overflow: scroll;  /* 对应d理解，结果：223,223，223=200（css大小）+40（两边内边距）-17（滚动条宽度）*/
}
window.onload = function(){
    var obj = document.getElementById("test");
    alert(obj.clientWidth + "," + obj.clientHeight);
};

Note: If no CSS width and height are set, the non-IE browser counts the calculated size of the scroll bar and margin, while the IE browser returns 0 (IE8 repaired).

2. ScrollWidth and scrollHeight
This set of properties gets the element size of the scrolling content (visible content). T he element size is returned, and the default unit is px. I f you do not set any CSS width and height, it will get the calculated width and height. For the actual size of the element, scrollWidth and scrollHeight understand the following:
1. Add the border, different browsers have different interpretations (below in IE8 is not working properly, IE6 is not working properly):
a) Firefox and Opera browsers will increase the size of the border, 220x220
b) IE, Chrome, and Safari ignore the border size, 200x200
c) IE browser only shows the height of its original content, 200x18 (IE8 has modified the problem)
2. By increasing the margin, the final value will be equal to the original size plus the margin size, 220x220, and IE 220x38
3. By adding the scroll bar, the final value will be equal to the original size minus the size of the scroll bar, 184x184, and IE 184x18
4. Increase the external margin, no change.
5. Increased content overflow, Firefox, Chrome, and IE get the actual content height, Opera gets less height than the first three browsers, and Safari gets a higher height than the first three browsers.

3. offsetWidth and offsetHeight
This set of properties returns the actual size of the element, including borders, margins, and scroll bars. T he element size is returned, and the default unit is px. I f you do not set any CSS width and height, he will get the calculated width and height. OffsetWidth and offsetHeight understand the actual size of the element as follows:
1. Increase the border, the final value will be equal to the original size plus border size, 220;
2. Increase the margin, the final value will be equal to the original size plus the inner margin size, 220;
3. Increase the external conditions, no change;
4. Increase the scroll bar, no change, will not decrease;
For element size acquisition, it is generally a block-level element and it is convenient to set the CSS size of the element. This is especially cumbersome if it's an inline element or an element that doesn't have a size set, so it's recommended to be careful when using it.

<div id="test">test div element</div>
#test{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 10px red; /*结果：220,220*/
    margin: 10px; /*结果：220,220（无变化）*/
    padding: 10px; /*结果：240,240*/
    overflow：scroll; /*结果：240,240（无变化）*/
}
window.onload = function(){
    var obj = document.getElementById("test");
    alert(obj.offsetWidth + "," + obj.offsetHeight);
};

V. Get the surrounding size of the element

<div id="test">test div element</div>
#test{
    background-color: green;
    width: 200px;
    height: 200px;
    border-top: solid 10px red;s
    border-right: solid 20px #00ff00;
    border-bottom: solid 30px blue;
    border-left: solid 40px #808080; 
}
window.onload = function(){
    var obj = document.getElementById("test");
    alert(obj.clientLeft + "," + obj.clientTop); // 40,10
};

2. OffsetLeft and offsetTop
This set of properties gets the position of the current element relative to the parent element. Getting an element's current position relative to the parent element is best set to positionposition:absolute;
a. Setposition to absolute, and all browsers return the same value. Such as:

<div id="test">test div element</div>
    #test {
        background-color: green;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 30px;
        top: 20px;
    }
        window.onload = function(){
        var obj = document.getElementById("test");
        alert(obj.offsetLeft + "," + obj.offsetTop); // 30， 20
    };

b, plus borders and margins won't affect its position, but adding outer edges will add up.

3, box.offsetParent gets the parent element
In offsetParent, if the parent element itself is the body, the non-IE returns the body object, and the IE (IE6) returns the html object. I f the two elements are nested, if the upper parent element does not use anchor:absolute, the offsetParent returns neither the body object or the html object. Therefore, CSS positioning is important when getting offsetLeft and offsetTop.

If, in many layers, the outer layer has been positioned, how do we get the distance between the elements of the middle layer from the body or html elements? T hat is, getting the distance of any element from the page. Then we can write functions that can be implemented by non-stop backtracking to get the add-up.

box.offsetTop + box.offsetParent.offsetTop;     // 只有两层的情况下
 
function offsetLeft(element){
    var left = element.offsetLeft; // 得到第一层距离
    var parent = element.offsetParent; // 得到第一个父元素
    while (parent !== null) { // 如果还有上一层父元素
        left += parent.offsetLeft; // 把本层的距离累加
        parent = parent.offsetParent; // 得到本层的父元素
    } //然后继续循环
    return left;
}

4.scrollTop and scrollLeft
This set of properties can get the size of the area where the scroll bar is hidden (the area above the scroll bar), or you can set the anchor to that area. If you want the scroll bar to scroll to its original position, you can write a function:

function scrollStart (element) {
    if ( element.scrollTop != 0 ) {
        element.scrollTop = 0;
    }
}

5、getBoundingClientRect()
This method returns a rectangular object with four properties: left, top, right, andbottom. Represents the distance between the sides of an element and the edges of the page and the left, respectively.

var box=document.getElementById('box');     // 获取元素
alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom);  // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left);         // 元素左边距离页面左边的距离

Note: IE, Firefox3 plus, Opera9.5, Chrome, Safari support, in IE, the default coordinates start from (2,2), resulting in the final distance than other browsers two pixels more, we need to be compatible.

document.documentElement.clientTop; //非IE为0，IE为2
document.documentElement.clientLeft; //非IE为0，IE为2
functiongGetRect (element) {
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left= document.documentElement.clientLeft;
    return{
        top  :   rect.top - top,
        bottom  :   rect.bottom - top,
        left  :   rect.left - left,
        right  :    rect.right - left
    }
}

Add the outer edge, margin, border, and scroll bar to test that all browsers are consistent.