머리말
이 상황은 개발 중에 발생합니다. 두 줄만 표시됩니다. 두 줄 이상을 초과하면 "더 많은 표시"버튼이 표시됩니다. 버튼을 클릭하여 나머지 라인의 내용을 표시하십시오. 이 기능을 구체적으로 구체화하는 jQuery 플러그인 loadingDots 이 있습니다. 그러나 오늘 우리는이 요구 사항을 구현하기 위해 기본 JavaScript를 사용합니다. 이 요구 사항을 달성하기 위해 가장 중요한 것은이 컨테이너의 텍스트 줄 수를 결정하는 것입니다. 라인 수를 얻은 후 요소 높이를 수정하고로드 버튼이 표시되는지 확인하십시오.
Window.getComputedStyle ()
기본 JavaScript 코드를 사용하여 요소의 개별 스타일 속성을 얻으려면 window.getComputedStyle() 사용하는 것이 불가피합니다. 브라우저에 실제로 표시되면 HTML 요소의 스타일을 반환 할 수 있습니다. 물론 일부 스타일은 브라우저에 의해 차단됩니다. 예를 들어, 링크의 색상을 가져 와서 사용자가 특정 주소를 색상으로 방문했는지 여부를 판단 할 준비가 되려면 불가능합니다.
이 메소드는 CSSStyleDeclaration 의 인스턴스 인 스타일 키 값 쌍을 반환합니다. 각 속성의 인덱스 이름에는 - 낙타 명명법이 채택되었습니다. 예를 들어, lineHeight .
행 수 = 전체 높이/선 높이
전체 높이는 높이를 통해 얻을 수 있습니다. 행 높이는 lineHeight 를 통해 얻을 수 있으며 결과는 행의 수를 얻기 위해 반올림됩니다.
그러나 line-height 값이 요소에 대해 설정되지 않으면 기본값이 normal 이므로 데스크탑 브라우저에서는 일반적으로 1.2이지만 글꼴과 관련이 있습니다. 따라서 행 수를 계산 해야하는 요소에 대한 line-height 값을 설정하는 것이 가장 좋습니다.
간단한 구현은 다음과 같습니다.
함수 카운트 라인 (ele) {var styles = window.getComputedStyle (ele, null); var lh = parseint (Styles.lineHeight, 10); var h = parseint (Styles.height, 10); var lc = math.round (h / lh); console.log ( 'line count :', lc, 'line-height :', lh, 'height :', h); 리턴 LC;}완전한 코드 예제
<! doctype html> <html> <head> <title> line count </title> <style type = "text/css"> p {line-height : 1.3em; } </style> <meta http-equiv = "content-type"content = "text/html; charset = gb2312"> </head> <body> <p id = "target"> 그녀는 방금 아기를 사랑스럽게 보이게 만들었습니다. 모든 것이 흰색이며 그녀는 항상 김이 나는 신선한 블루 베리 파이와 스콘과 닫힌 크림을 가지고 있으며, 그녀는 노인과 바다를 읽고 있으며 그녀의 어린 소년은 보닛과 함께 롤리입니다. 놀랍습니다. 나는 이것이 사랑 스럽다고 생각했습니다. 내 아이는 폭발적인 장치처럼 놀고있는 것과 같습니다. 나는 그녀가 우리 강아지의 귀에 붙이는 것처럼 그녀가 어디를 찾았는지 모르겠습니다. 그녀는 이미 벽에 구멍을 뚫는 방법을 이미 알고 있습니다. <br /> "오늘날의 중국인은 그 당시의 독일인들과 마찬가지로"상승 "의 환상에 빠지고, 다른 사람들의 아첨을 믿는 것에 익숙해졌으며, 중국이 경제 성장을 유지하는 한, 미래의 경제 지도자가 기대할 수있을뿐만 아니라, 중국의 '세계 지도자'를 능가 할 것입니다. 주머니. " 상하이 외교 연구 대학의 국제 관계 및 공공 문제 학교 교수 인 Cheng Yawen은 그의 새로운 저서 "Great Powers의 전략적 힘"에서 중국의 많은 사람들이 현재 "번영"의 환상에 갇히고 있으며, 전체 경제 총재 뒤에는 실제로 중국이 실제로 뒤로 향한 나라임을 깨닫지 못했다고 지적했다. 세상에는 침착하고 평화로운 상황에서 등장한 큰 나라가 없으며, 중국의 새로운 문명 회춘은 위험과 비틀기와 회전으로 가득 차있을 것입니다. 국가가 붕괴, 붕괴 또는 감소를 막는 것이 중국 국가 전략의 최우선 과제가되어야합니다. "부드러운 행복"을 심화 시키면 나라를 취약하게 만듭니다. </p> <p> 행의 수 : <span id = "shown"> </span> </p> 창 크기를 변경하고 자동으로 <countlines () "> 즉시 계산 </button> <script type ="text/javaScript "> var target = document.getElementById ( 'target'); var shown. = window.getComputedStyle (ele, null); var lh = parseint (Styles.lineHeight, 10); var h = parseint (Styles.height, 10); var lc = math.round (h / lh); console.log ( 'line count :', lc, 'line-height :', lh, 'height :', h); return lc;} function Change () {shower.innerhtml = countlines (target);} wind요약
위는이 기사에 관한 것입니다. 이 기사의 내용이 JavaScript를 사용하는 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 두십시오.