/    Sign up×
Community /Pin to ProfileBookmark

Accessing style attributes using javascript

Copy linkTweet thisAlerts:
May 03.2007

I have a page with a div layer. I need to be able to access the height attribute using javascript:

[code=html]<style>
#testDiv {
margin: 0 auto;
width: 545px;
margin: 10px 0 10px 23px;
height: 300px;
}
</style>
<body>
<script type=”text/javascript”>
function getHeight(){
var h = document.getElementByI(‘testDiv’).style.height;
alert(h);
}
</script>

<div id = “testDiv”>
Content
</div>

<a href =”javascript:getHeight()”>click</a>
</body>[/code]

Clicking the link calls the function which should alert with the div height attribute. It appears blank.

If i explicitly define the div height in the div itself clicking the link returns the height

[code=html]

<div id = “testDiv” style=”height:300px”>
Content
</div>

[/code]

Is there anyway I can access the height attribute if it is set in the CSS decleration?

Thanks

Beedge

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisMay 03.2007 — Do you need to know the DIV's actual height, or do you need to know the height defined by the style?
document.getElementById("testDiv").offsetHeight;
Copy linkTweet thisAlerts:
@ChikaraMay 03.2007 — <script type="text/javascript">

function getHeight(){

var h = document.getElementByI('testDiv').style.height;

alert(h);

}

</script>


You are missing the d. document.getElementById('testDiv')
Copy linkTweet thisAlerts:
@hackmagicMay 03.2007 — style sheet values are not inherited by javascript style object, which totally sucks - 2 independent methods of altering the same value. what moron came up with that. but thats the way it is. and this is the style property. there are also the actual div objects dimension properties which have their own stupidness (but at least they are useful for a bit of dynamic manipulation).

it seems to me you have to specifically dimension and position your layers or use [I]object[/I].offsetHeight (read-only so you have to write to [I]object[/I].height which has no default value (so you have to read [I]object[/I].offsetHeight!!)) rather than the style properties.

just keep playing with all possible style and non-style dimension and you will eventually figure it out :eek:

Pete
Copy linkTweet thisAlerts:
@mrhooMay 03.2007 — This will return a style property value if it is set inline in any browser.

It will return a property value inherited from a style sheet in IE and the gecko browsers, but it is labor intensive. The way to read an inherited style in Opera is too scary to tell.


[CODE]function deepCss(who, prop){
val= who.style[prop];
if(!val){
if(who.currentStyle) val= who.currentStyle[prop];
else{
var dv= document.defaultView;
if(dv && dv.getComputedStyle){
prop=prop.replace(/[A-Z]/g,function(w){
return '-'+ w.toLowerCase();
});
val= dv.getComputedStyle(who,'').getPropertyValue(prop);
}
}
}
return val;
}[/CODE]

pass it an element and a javascript style property name-

deepCss(document.body,'fontSize')
Copy linkTweet thisAlerts:
@ricpMay 03.2007 — Good work, mrhoo ?

btw, just incase anyone wasn't aware of it, but the offsetHeight/Width takes into consideration any padding/borders/margins depending on the box model you are using.
Copy linkTweet thisAlerts:
@hackmagicMay 03.2007 — good work mrhoo thats well hardcore!!
Copy linkTweet thisAlerts:
@BeedgeauthorMay 04.2007 — Thanks to everyone who replied. Ive learned some useful stuff from your answsers. I think the object.offsetHeight method suggested by Gil and Hackmagic will form the core of the solution and I will definetly be book markin mrhoos deepCSS funtion ?

Thanks again.
×

Success!

Help @Beedge spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...