Question

我想找到包裹几行的SPAN的总宽度。那可能吗？它是单个SPAN标记，没有其他内部节点......

如果那是不可能的，我至少要找到SPAN开头和结尾的左右像素偏移。

Answer 1

您需要致电getClientRects。你会得到一个行矩形数组，可以添加宽度。

QuirksMode有nice demo。

Answer 2

HI，我认为您可以使用 getBoundingClientRect 功能实现此目的。

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

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

Answer 3

如果全部是一行，你想找到一个文本块的像素宽度吗？

我认为你可以做的事情（而且有人会因为错误而将其拒绝）是使用javascript在页面上的另一个div中设置另一个范围（例如style =“top：-500px;”），取内部HTML，将其放到隐藏的跨度中，取出包含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>

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

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

Answer 4

var element = document.getElementById('someSpan');    
var elementWidth = element.offsetWidth;

不知道这是不是你真正要问的，但那会给你跨度的宽度。

编辑：在再次阅读你的问题3次后，我很确定这不是你所要求的。

包装内联元素的总宽度

4 个答案: