>웹 프론트엔드 >JS 튜토리얼 >jQuery(js)는 텍스트 너비(표시 길이) 샘플 code_jquery를 가져옵니다.

jQuery(js)는 텍스트 너비(표시 길이) 샘플 code_jquery를 가져옵니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 17:06:001145검색

오늘은 텍스트 너비를 구하는 문제에 부딪혔습니다. 결국 외국 사이트에서 방법을 찾았지만 바로 사용할 수 없어서 수정해서 프로젝트에 성공적으로 사용했습니다. 여기서 공유하겠습니다.

먼저 본문 태그 끝에 하위 태그를 추가하세요.

코드 복사 코드는 다음과 같습니다.

test

그런 다음 해당 CSS 코드를 추가하세요.
코드 복사 코드는 다음과 같습니다.

#ruler {
visibility:
white- space: nowrap;
font-size: 24px ;
}

다음으로 String 프로토타입에서 텍스트 너비를 구하는 함수를 직접 추가하고 js에 다음 코드를 추가합니다. 코드:
코드 복사 코드는 다음과 같습니다.

String.prototype.visualLength = function ()
{
var rule = $("# rule");
ruler.text(this)
return rule[0].offsetWidth;

마지막으로 텍스트 너비를 구해야 하는 위치에 호출하세요. 예:

코드 복사 코드는 다음과 같습니다.
var text = "test";
var len = text.visualLength()

주요 아이디어는 숨겨진 라벨을 추가하는 것입니다. 레이블에 값이 할당될 때마다 레이블의 길이를 가져와 텍스트 너비를 얻습니다. DOM에 추가된 태그만 길이를 얻을 수 있다는 점에 유의해야 합니다.

도움이 되셨다면 도움이 되셨으면 좋겠습니다 감사합니다 :)
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.