I want to find the total width of a SPAN which wraps around several lines. Is that possible? It's a single SPAN tag, with no other internal nodes...
If that's not possible, I would atleast like to find the left and right pixel offsets of the start and end of the SPAN.
you want to find the pixel width of a block of text if it was all one line?
I think what you might be able to do (and someone will downvote this for being wrong) is to use javascript to set up another span in another div off the page (e.g. style="top:-500px;"), take the 's innerHTML, drop it to the hidden span, take the width of the containing div, and then run with that.
I predict cross browser issues and heartache
<html>
<head>
<script>
function getSpanWidth(spanID){
sourceSpan=document.getElementById(spanID)
targetSpan=document.getElementById("spanmeasure")
targetSpan.innerHTML=sourceSpan.innerHTML
alert(targetSpan.offsetWidth+" "+sourceSpan.offsetWidth)
}
</script>
<style>
div{border:1px solid #cc0000;}
</style>
</head>
<body onLoad="getSpanWidth('spantext')">
<div style="width:100000px; top:-1000px;position:absolute;"><span id="spanmeasure"></span></div>
<div style="width:200px;">
<span id="spantext"> span text goes here, and then if there is lots and lots it will wrap around and be awesome! I'll put in more text to awesome it out even more... Awesome!
</span>
</div>
</body>
</html>
this seems to work on ie7 and ff. You will get variation if you don't use a reset style (because the default fonts are different)
also, if you set display:none, then the width will be 0.
You need to call getClientRects. You'll get an array of line rectangles and can add the width.
QuirksMode has a nice demo.
var element = document.getElementById('someSpan');
var elementWidth = element.offsetWidth;
No idea if that's what you're really asking, but that'll give you the width of the span.
Edit: After reading your question 3 more times I'm pretty sure this isn't what you're asking.
HI, I think you can achieve this by using getBoundingClientRect function.
var leftPosition = yourElement.getBoundingClientRect().left;
var rightPosition = yourElement.getBoundingClientRect().right;
var topPosition = yourElement.getBoundingClientRect().top;
var bottomPosition = yourElement.getBoundingClientRect().bottom;
I am not sure whether you are looking for this or not.