Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > узнать ширину текста

Автор: Samotnik 16.1.2010, 12:32

Привет
Подскажите, пажалста, как можно узнать ширину текста, в элементе ? smile

Автор: Amphiluke 16.1.2010, 13:16

Если интересует просто ширина неформатированного текста (произвольной строки), можно так.

Код


function getTextWidth(txt) {
    var spn = document.createElement("span");
    spn.appendChild(document.createTextNode(txt));
    document.getElementsByTagName("body")[0].appendChild(spn);
    var __width = spn.offsetWidth;
    document.getElementsByTagName("body")[0].removeChild(spn);
    return __width;
}

Или вместо body использовать другой контейнер (например, если нужно учесть стили).

Пример использования:

Код


<p onclick="alert(getTextWidth(this.firstChild.nodeValue));">Lorem ipsum dolor sit amet!!!</p>

Автор: Samotnik 16.1.2010, 13:54

спасибо, я по это читал, думал, есть другой способ

Автор: Котокобра 18.1.2010, 11:50

вот пример, должно помочь

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body>

<script>
function f(id){
    msg = "<b>Расположение элемента:</b>" + "<br />" +
        "высота: " + id.offsetHeight + "<br />" +
        "ширина: " + id.offsetWidth + "<br />" +
        "смещение от верхнего края: " + id.offsetTop + "<br />" +
        "смещение от левого края: " + id.offsetLeft + "<br />" +
        "объект, относительно которого происходит позиционирование: " + id.offsetParent.tagName;
    el.innerHTML = msg;
//    alert(msg.replace(/<br \/>/g, "\n"));
}
</script>

<div id="output_block">&nbsp;</div>
<script>var el = document.getElementById('output_block');</script>

<a href="javascript://" onclick="f(this)">click me</a>

</body>
</html>