Where Is The Default Size of a Div Element Defined or Calculated

Where is the default size of a div element defined or calculated?

div tags are block level elements. All block level elements inherit the width of their parent element by default.

In your example, the div is inheriting the width of the parent body tag, taking into account any margin or padding on the body element.

MDN is usually a great source of information for this sort of thing - see https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

Calculate element's default height when it hasn't default value

This is the best solution that I found till this moment, if your element is a container. You can insert an inner div immediately inside your element so that it (inner div) wrap whole contents of your (outer) element. As this:

<theElement style="height:40px;"> <!-- This is a CONTAINER! -->
    <div id="inner_div" style="margin:0; border:0; height:auto;">
        <!-- Your contents will be inserted here. -->
    <div>
</theElement>

Now you can:

console.log(theElement.clientHeight) // This logs 40.

yourDesiredValue = document.getElementById('inner_div').clientHeight;
console.log(yourDesiredValue);       // This logs that you want.

console.log(theElement.clientHeight) // This logs 40.

---

Notice that the inner div must has no margin and no border-width and its CSS height must be auto or initial.

Also it is recommended that insert CSS property declaration: overflow-y:hidden for theElement. So inner div can't pass from its parent's bounds, visually.

Get div height with plain JavaScript

var clientHeight = document.getElementById('myDiv').clientHeight;

or

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

Find out what the cause is of a certain calculated CSS style

Install IE Developer Toolbar for Internet Explorer. It sometimes makes life much easier.
EDIT: New versions of IE contain developer tools by default, accessible by pressing F12.

How do I retrieve an HTML element's actual width and height?

You should use the .offsetWidth and .offsetHeight properties.
Note they belong to the element, not .style.

var width = document.getElementById('foo').offsetWidth;

The .getBoundingClientRect() function returns the dimensions and location of the element as floating-point numbers after performing CSS transforms.

> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Getting the calculated font-size of a div

function elementCurrentStyle(element, styleName){
if (element.currentStyle){
var i = 0, temp = "", changeCase = false;
for (i = 0; i < styleName.length; i++)
if (styleName[i] != '-'){
temp += (changeCase ? styleName[i].toUpperCase() : styleName[i]);
changeCase = false;
} else {
changeCase = true;
}
styleName = temp;
return element.currentStyle[styleName];
} else {
return getComputedStyle(element, null).getPropertyValue(styleName);
}
}

alert(elementCurrentStyle(myDiv,"font-size"));

I've describe this "getting computed style" issue few weeks ago here.

cheers,

calculate and set the height for some div (initial settings). When the height of the browser window is changed --> change the height for div

If you are purely looking to tidy up the code, it could look something like this:

$(document).ready(function () {

    var resizeIt = function() {
      var height = Math.max(document.documentElement.clientHeight - 500, 135);
      $('#left_space').css('height', height + 'px');
    };

    resizeIt();

    $(window).resize(function () {
        resizeIt();
    });
});

Here I have pulled out the lines of code that set the height into their own function, so the code is not duplicated. Then I took advantage of some of the shorter syntax you can use in jQuery for finding and changing styles of elements.

---

Related Topics