/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Simple ‘property:value’ detection..Irritating

Copy linkTweet thisAlerts:
Mar 31.2009

Not even sure why this isn’t working:

[CODE]
<html><head><title>…</title>

<script type=”text/javascript”>

var the_links = document.getElementById(“links”);
var ini_loc = parseInt(the_links.style.left);
[COLOR=”Blue”]alert(ini_loc);[/COLOR]

</script>

<style type=”text/css”>

#links {position:absolute;
top: 0px;
left:100px;
color:black;
width: 275px;
font-size: .8em;
font-family:Arial;
}
</style></head>
<body>

<div id=”links”>

<ul>
<li><a href=”Bookclub.html”>Home</a></li>
<li><a href=”Mission.html”>Mission</a></li>
<li><a href=”music_format.html”>Music Format</a></li>
<li><a href=”purchase_page.html”>Purchase</a></li>
</ul>
</div>
</body>
</html>
[/CODE]

Any one know the catch?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienMar 31.2009 — The style property of a DOM node is completely disconnected from the computed style resulting from style sheet rules. The style property only contains CSS style rules declared in the style attribute of an HTML tag. Since the div#links tag does not contain a style attribute, anything in the style object for that DOM node will simply not exist.
Copy linkTweet thisAlerts:
@FangMar 31.2009 — You have to wait until the element is loaded. The [I]obj.style[/I] is only for inline style declarations.
window.onload = function() {
var the_links = document.getElementById("links");
if(the_links.currentStyle) { //IE
var ini_loc = the_links.currentStyle['left'];
}
else if(document.defaultView &amp;&amp; document.defaultView.getComputedStyle) { // W3C
var ini_loc = document.defaultView.getComputedStyle(the_links,null).getPropertyValue('left');
}
alert(parseInt(ini_loc));
};
Copy linkTweet thisAlerts:
@JohnBeasonauthorMar 31.2009 — You have to wait until the element is loaded. The [I]obj.style[/I] is only for inline style declarations.
window.onload = function() {
var the_links = document.getElementById("links");
if(the_links.currentStyle) { //IE
var ini_loc = the_links.currentStyle['left'];
}
else if(document.defaultView &amp;&amp; document.defaultView.getComputedStyle) { // W3C
var ini_loc = document.defaultView.getComputedStyle(the_links,null).getPropertyValue('left');
}
alert(parseInt(ini_loc));
};
[/QUOTE]

Ohhhh....didn't know that what I was trying to do only applied to [I]inline styles[/I]...learned something new today...

In the code above, what's the difference between IE's style detection vs W3C's? Why is there a difference?
Copy linkTweet thisAlerts:
@FangMar 31.2009 — Why is there a difference[/QUOTE]IE doesn't always support W3C recommendations
×

Success!

Help @JohnBeason 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.27,
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,
)...