javascript - Have trouble retrieving height property from css file -
everyone.
i pretty sure answer question relatively easy.
i have .css file has following code:
div.site { text-align:center; border:2px solid #4b6c9e; padding:1px; margin-top:10px; font-size:medium; font-family:verdana; font-weight:bold; height:25px; } then, have .js file builds div xml. here fragment:
txt = txt + "<div class='site'><span class='link'><a class='nav' href=' " + siteurl[0].firstchild.nodevalue + "' target='_blank'>" + sitename[0].firstchild.nodevalue + "</a></span></div>" document.getelementbyid('portallinks').innerhtml = txt; my .html file has following:
<div id="portallinks"></div> i have no problem displaying data on page. have trouble getting height site class .css file. using following code:
var height = $(".site").height(); what want use height, dynamically calculate height portallinks:
$("#portallinks").css({ "height": newheight }) - newheight calculated based on `height` thank's in advance.
keep in mind value returned $(".site").height(); not complete css height value. number.
calling $("#portallinks").css({"height": newheight}) result of first call set invalid value of 25. you'll want attach unit variable -- in case, px:
$("#portallinks").css({"height":newheight+'px'}); also, worth mentioning call alone set height of #portallinks height of one .site element.
if want set height combined total, need iterate through results of $('.site') somehow:
var newheight = 0; $(".site").each(function(){ newheight += $(this).height() }); $("#portallinks").css({"height":newheight+'px'}); see fiddle working example: http://jsfiddle.net/ezwx4/
other notes: .height() returns value of css height attribute. not account padding and/or borders.
this cause display problems in cases, should consider using outerheight() instead.
also: using outerheight(true) include defined margins in result.
Comments
Post a Comment