Javascript 换行内联元素的总宽度_Javascript

Javascript 换行内联元素的总宽度

javascript

Javascript 换行内联元素的总宽度,javascript,Javascript,我想求一个跨度的总宽度，它围绕着几条线。可能吗？它是一个单跨距标记，没有其他内部节点如果不可能，我至少希望找到跨度起点和终点的左右像素偏移量。如果文本块都是一行，是否希望找到文本块的像素宽度我认为您可以使用javascript在页面的另一个div中设置另一个span（例如style=“top:-500px；”），获取的innerHTML，将其放到隐藏span，获取包含div的宽度，然后运行我预测跨浏览器问题和心痛 <html> <head> <script&g

我想求一个跨度的总宽度，它围绕着几条线。可能吗？它是一个单跨距标记，没有其他内部节点

如果不可能，我至少希望找到跨度起点和终点的左右像素偏移量。

如果文本块都是一行，是否希望找到文本块的像素宽度

我认为您可以使用javascript在页面的另一个div中设置另一个span（例如style=“top:-500px；”），获取的innerHTML，将其放到隐藏span，获取包含div的宽度，然后运行

我预测跨浏览器问题和心痛

<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>


函数getSpanWidth（spanID）{
sourceSpan=document.getElementById（spanID）
targetSpan=document.getElementById（“spanmeasure”）
targetSpan.innerHTML=sourceSpan.innerHTML
警报（targetSpan.offsetWidth+“”+sourceSpan.offsetWidth）
}
div{边框：1px实心#cc0000；}
span text在这里，然后如果有很多很多，它将环绕，非常棒！我会放更多的文字，让它更精彩。。。令人惊叹的！

这似乎对ie7和ff有效。如果不使用重置样式，您将得到变化（因为默认字体不同）

另外，如果设置display:none，则宽度将为0。

您需要调用。您将得到一个直线矩形数组，并可以添加宽度

QuirksMode有一个

不知道这是否是你真正想要的，但这会给你跨度的宽度

编辑：在把你的问题再读三遍之后，我很确定这不是你要问的问题。

嗨，我认为可以通过使用getBoundingClientRect函数来实现这一点

var leftPosition = yourElement.getBoundingClientRect().left;
var rightPosition = yourElement.getBoundingClientRect().right;
var topPosition = yourElement.getBoundingClientRect().top;
var bottomPosition = yourElement.getBoundingClientRect().bottom;

我不确定你是否在找这个。

试图理解，总宽度=宽线1+宽线2+等等？还有，相对于（其容器、窗口）的左右偏移？

var leftPosition = yourElement.getBoundingClientRect().left;
var rightPosition = yourElement.getBoundingClientRect().right;
var topPosition = yourElement.getBoundingClientRect().top;
var bottomPosition = yourElement.getBoundingClientRect().bottom;