자바스크립트/jQuery에서 문자열의 픽셀 길이를 결정하시겠습니까?

자바스크립트/jQuery에서 문자열의 픽셀 길이를 결정하시겠습니까?

jQuery/JavaScript에서 문자열의 픽셀 길이를 결정할 수 있는 방법이 있습니까?

HTML 캔버스에 사용되는 컨텍스트에는 글꼴 크기를 확인할 수 있는 기본 제공 방법이 있습니다.이 메서드는 다음을 반환합니다.TextMetrics텍스트의 너비를 포함하는 너비 속성을 가진 개체입니다.

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.c === undefined){
        getWidthOfText.c=document.createElement('canvas');
        getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
    }
    var fontspec = fontsize + ' ' + fontname;
    if(getWidthOfText.ctx.font !== fontspec)
        getWidthOfText.ctx.font = fontspec;
    return getWidthOfText.ctx.measureText(txt).width;
}

또는 다른 사용자들이 제안한 것처럼, 당신은 그것을 a로 포장할 수 있습니다.span요소:

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.e === undefined){
        getWidthOfText.e = document.createElement('span');
        getWidthOfText.e.style.display = "none";
        document.body.appendChild(getWidthOfText.e);
    }
    if(getWidthOfText.e.style.fontSize !== fontsize)
        getWidthOfText.e.style.fontSize = fontsize;
    if(getWidthOfText.e.style.fontFamily !== fontname)
        getWidthOfText.e.style.fontFamily = fontname;
    getWidthOfText.e.innerText = txt;
    return getWidthOfText.e.offsetWidth;
}

EDIT 2020 : 이고르 오코로코프의 제안으로 글꼴 이름+크기 캐싱 추가

텍스트를 스판으로 래핑하고 jquery width()를 사용합니다.

편집: jQuery는 아마도 더 이상 최선의 해결책이 아닐 것입니다.https://youmightnotneedjquery.com/ #get_width에서 볼 수 있는 것처럼 일반 자바스크립트를 사용하는 것도 옵션입니다.

el.getBoundingClientRect().width;

끈만 할 수 있는 것은 아니지만, 끈을 안에 넣으면.<span>올바른 속성(크기, 글꼴 무게 등)을 사용하여 jQuery를 사용하여 스팬의 너비를 얻을 수 있습니다.

<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
<script>
  $('#string_span').width();
</script>

절대 위치 div에 넣은 다음 clientWidth를 사용하여 태그의 표시 폭을 가져옵니다.div를 숨기기 위해 가시성을 "숨김"으로 설정할 수도 있습니다.

<div id="text" style="position:absolute;visibility:hidden" >This is some text</div>
<input type="button" onclick="getWidth()" value="Go" />
<script type="text/javascript" >
    function getWidth() {
        var width = document.getElementById("text").clientWidth;
        alert(" Width :"+  width);
    }
</script>

vSync의 답변에 따르면, 순수 자바스크립트 방식은 많은 양의 객체에 대해 매우 빠릅니다.Fiddle: https://jsfiddle.net/xeyq2d5r/8/

[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"

네이티브 자바스크립트 vs HTML 캔버스를 사용하는 3번째 제안된 방법에 대해 좋은 테스트를 받았습니다.

구글은 옵션 1과 옵션 3, 2에 대해 꽤 경쟁적이었습니다.

파이어폭스 48:
방법 1은 938.895 밀리초가 걸렸습니다.
방법 2는 1536.355 밀리초가 걸렸습니다.
방법 3은 135.914999999996밀리초가 걸렸습니다.

에지 11 방법 1은 4895.262839793865밀리초가 걸렸습니다.
방법 2는 6746.622271896686밀리초가 걸렸습니다.
방법 3은 1020.0315412885484밀리초가 걸렸습니다.

구글 크롬: 52
방법 1은 336.4399999998밀리초가 걸렸습니다.
방법 2는 2271.71 밀리초가 걸렸습니다.
방법 3은 333.304999999984밀리초가 걸렸습니다.

먼저 텍스트의 위치와 스타일을 복제한 다음 Jquery width() 함수를 사용합니다.이렇게 하면 측정값이 정확해집니다.예를 들어 다음과 같은 셀렉터를 사용한 CSS 스타일링이 있습니다.

.style-head span
{
  //Some style set
}

이 스크립트 위에 이미 포함되어 있는 Jquery를 사용하여 이 작업을 수행해야 합니다.

var measuringSpan = document.createElement("span");
measuringSpan.innerText = 'text to measure';
measuringSpan.style.display = 'none'; /*so you don't show that you are measuring*/
$('.style-head')[0].appendChild(measuringSpan);
var theWidthYouWant = $(measuringSpan).width();

그렇게까지 말하지 않아도

원하는 너비

픽셀 길이를 유지합니다.그런 다음 작성한 요소를 삭제합니다. 그렇지 않으면 여러 번 삭제하면 여러 개가 나옵니다.또는 참조할 ID를 대신 추가합니다.

아마도 그것은 누군가에게 유용할 것입니다.

const getMaxPixelsOfStrings = ({ strings, styles = {} }) => {
  const spans = strings.map(str => {
    const span = document.createElement('span')
    span.append(str)
    Object.assign(span.style, {
      position: 'absolute',
      ...styles,
    })

    return span
  })

  document.querySelector('html').prepend(...spans)
  const maxPixels = Math.max(...spans.map(span => span.getBoundingClientRect().width))

  spans.forEach(span => span.remove())

  return maxPixels
}

사용.

getMaxPixelsOfStrings({
            strings: ['One', 'Two', 'Three', 'Four', 'Five'],
            styles: {
              fontSize: '18px',
              letterSpacing: '1px',
            },
          })

Snap.svg를 사용하는 경우 다음이 작동합니다.

var tPaper = Snap(300, 300);
var tLabelText = tPaper.text(100, 100, "label text");
var tWidth = tLabelText.getBBox().width;  // the width of the text in pixels.
tLabelText.attr({ x : 150 - (tWidth/2)});   // now it's centered in x

언급URL : https://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery