HTML, 자바 스크립트를 사용하여 페이지에 더 많은 정보를 추가하는 방법

Mohamd El-Saleh

더 많은 / 더 적은 텍스트 기능을 만들어야하는데 JavaScript와 HTML 만 있으면됩니다. jQuery와 같은 추가 라이브러리를 사용할 수 없으며 CSS로도 할 수 없습니다.

아소 타 익쿤

적절한 설명없이 완전한 솔루션을 제공하는 것은 좋지 않습니다. 그래서 저는 반쯤 만든 해결책 만 만들었습니다.

html :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ligula id neque pharetra luctus. Nulla in luctus tortor. Nullam non lectus tellus. Pellentesque maximus rutrum dolor, aliquet dapibus lectus dignissim eu. Fusce non blandit risus. Suspendisse fermentum ipsum justo, vitae finibus risus convallis non. Proin euismod euismod orci, suscipit sodales sem fringilla sed. Maecenas iaculis ac elit cursus efficitur. Vivamus at bibendum purus, non molestie libero. Donec fermentum ante non diam bibendum, nec consectetur orci gravida. APPLES FOR SALE!  <br>
<a href="#" id="js-more">Show more!</a>
  <span id="js-hidden">  
  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque faucibus felis eget auctor ultricies. Cras vel posuere lorem. Etiam tincidunt maximus magna. Phasellus eu nisi quam. Curabitur dictum felis ut vulputate rhoncus. Aliquam et odio justo. Morbi sit amet lectus sit amet nulla lobortis tempor et et nulla. Proin eget posuere nunc, ac tristique turpis. Curabitur elementum maximus dolor, ac vehicula dui dictum at. Integer libero nisi, pulvinar a turpis pretium, rhoncus suscipit erat. In auctor odio ut odio aliquam malesuada at at quam. Fusce lobortis, diam euismod tempor luctus, diam mi venenatis lectus, sed tempus neque risus et neque. Fusce id vestibulum nunc, at gravida leo. Morbi fringilla dolor ac molestie aliquet.
  </span> 
<p>

Node.js : var hiddenText = document.getElementById ( 'js-hidden'); var toggleButton = document.getElementById ( 'js-more'); hiddenText.style.display = '없음'; hiddenText.className = '숨김';

  function hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }

  toggleButton.onclick = function toggleText(){
    console.log("click happens");

    if(hasClass(hiddenText, 'hidden') == 1)
    {
        console.log("true");
      hiddenText.style.display = 'block'; 
      hiddenText.className = '';     
    }
    else
    {
        console.log("false");
      hiddenText.style.display = 'none'; 
      hiddenText.className = 'hidden'; 
    }

    return false;
  }  

https://jsfiddle.net/j769d4tp/9/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

HTML 페이지에서이 자바 스크립트를 사용하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트를 사용하여 HTML을 렌더링하는 방법

분류에서Dev

자바 스크립트를 사용하여 더 많은로드 버튼으로 iframe을로드하는 방법

분류에서Dev

자바 스크립트 내에서 더 많은 키를 이벤트하는 방법

분류에서Dev

여러 HTML 요소에 자바 스크립트를 첨부하는 더 좋은 방법이 있습니까?

분류에서Dev

자바 스크립트 함수에서 더 많은 매개 변수를 바인딩하는 방법

분류에서Dev

자바 스크립트를 사용하여 프로젝트의 모든 파일에 대한 HTML 헤더를 만드는 방법은 무엇입니까?

분류에서Dev

자바 스크립트에서 for 루프를 사용하여 HTML을 추가하는 방법

분류에서Dev

HTML 페이지에서 자바 스크립트를 사용하여 버튼을 동적으로 추가하는 방법

분류에서Dev

자바 스크립트를 사용하여 부모 창에서 다른 HTML 페이지로 값을 전달하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트를 사용하여 jsp 페이지에 콘텐츠를 동적으로 추가하는 방법은 무엇입니까?

분류에서Dev

내 사용자 정의 된 자바 스크립트 코드를 html / php 페이지에 추가 (링크)하는 방법

분류에서Dev

자바 스크립트를 사용하여 필수 HTML 요소를 양식에 동적으로 추가하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트에서 HTML 페이지를로드하는 방법

분류에서Dev

자바 스크립트를 사용하여 HTML에서 스크립트 태그를 제거하는 방법

분류에서Dev

자바 스크립트의 버튼을 사용하여 HTML 페이지를로드하는 방법

분류에서Dev

AJAX 또는 PHP를 사용하여 데이터베이스에 더 많은 텍스트 상자를 추가하는 데이터를 저장하는 방법

분류에서Dev

자바 스크립트를 사용하여 한 HTML 페이지에서 다른 페이지로 데이터를 전송하는 방법

분류에서Dev

시간 초과없이 많은 양의 HTML 콘텐츠를 자바 스크립트의 클립 보드에 복사하는 방법

분류에서Dev

div 내에서 자바 스크립트를 사용하여 스크립트를 추가하는 방법

분류에서Dev

무들 사이트베이스를 사용하여 더 많은 mnet 서비스를 추가하는 방법

분류에서Dev

HTML에 자바 스크립트를 추가하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트 슬라이더 [rcarousel]-한 웹 사이트에서 여러 슬라이더를 사용하는 방법은 무엇입니까?

분류에서Dev

Express를 사용하여 더 많은 페이지를 추가하고 노드에 값을 보내는 방법은 무엇입니까?

분류에서Dev

자바를 사용하여 웹 페이지에서 자바 스크립트를 실행하는 방법

분류에서Dev

다른 페이지에서 "필수"PHP를 사용하여 HTML 페이지에 헤더 스크립트 추가

분류에서Dev

자바 스크립트를 사용하여 PNG에서 픽셀 정보를 추출하는 방법 (getImageData 대안)

분류에서Dev

자바 스크립트에서 for 루프를 작성하는 더 나은 방법

분류에서Dev

클라이언트 측에서 자바 스크립트를 사용하여 HTML 태그에서 이미지를 만드는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    HTML 페이지에서이 자바 스크립트를 사용하는 방법은 무엇입니까?

  2. 2

    자바 스크립트를 사용하여 HTML을 렌더링하는 방법

  3. 3

    자바 스크립트를 사용하여 더 많은로드 버튼으로 iframe을로드하는 방법

  4. 4

    자바 스크립트 내에서 더 많은 키를 이벤트하는 방법

  5. 5

    여러 HTML 요소에 자바 스크립트를 첨부하는 더 좋은 방법이 있습니까?

  6. 6

    자바 스크립트 함수에서 더 많은 매개 변수를 바인딩하는 방법

  7. 7

    자바 스크립트를 사용하여 프로젝트의 모든 파일에 대한 HTML 헤더를 만드는 방법은 무엇입니까?

  8. 8

    자바 스크립트에서 for 루프를 사용하여 HTML을 추가하는 방법

  9. 9

    HTML 페이지에서 자바 스크립트를 사용하여 버튼을 동적으로 추가하는 방법

  10. 10

    자바 스크립트를 사용하여 부모 창에서 다른 HTML 페이지로 값을 전달하는 방법은 무엇입니까?

  11. 11

    자바 스크립트를 사용하여 jsp 페이지에 콘텐츠를 동적으로 추가하는 방법은 무엇입니까?

  12. 12

    내 사용자 정의 된 자바 스크립트 코드를 html / php 페이지에 추가 (링크)하는 방법

  13. 13

    자바 스크립트를 사용하여 필수 HTML 요소를 양식에 동적으로 추가하는 방법은 무엇입니까?

  14. 14

    자바 스크립트에서 HTML 페이지를로드하는 방법

  15. 15

    자바 스크립트를 사용하여 HTML에서 스크립트 태그를 제거하는 방법

  16. 16

    자바 스크립트의 버튼을 사용하여 HTML 페이지를로드하는 방법

  17. 17

    AJAX 또는 PHP를 사용하여 데이터베이스에 더 많은 텍스트 상자를 추가하는 데이터를 저장하는 방법

  18. 18

    자바 스크립트를 사용하여 한 HTML 페이지에서 다른 페이지로 데이터를 전송하는 방법

  19. 19

    시간 초과없이 많은 양의 HTML 콘텐츠를 자바 스크립트의 클립 보드에 복사하는 방법

  20. 20

    div 내에서 자바 스크립트를 사용하여 스크립트를 추가하는 방법

  21. 21

    무들 사이트베이스를 사용하여 더 많은 mnet 서비스를 추가하는 방법

  22. 22

    HTML에 자바 스크립트를 추가하는 방법은 무엇입니까?

  23. 23

    자바 스크립트 슬라이더 [rcarousel]-한 웹 사이트에서 여러 슬라이더를 사용하는 방법은 무엇입니까?

  24. 24

    Express를 사용하여 더 많은 페이지를 추가하고 노드에 값을 보내는 방법은 무엇입니까?

  25. 25

    자바를 사용하여 웹 페이지에서 자바 스크립트를 실행하는 방법

  26. 26

    다른 페이지에서 "필수"PHP를 사용하여 HTML 페이지에 헤더 스크립트 추가

  27. 27

    자바 스크립트를 사용하여 PNG에서 픽셀 정보를 추출하는 방법 (getImageData 대안)

  28. 28

    자바 스크립트에서 for 루프를 작성하는 더 나은 방법

  29. 29

    클라이언트 측에서 자바 스크립트를 사용하여 HTML 태그에서 이미지를 만드는 방법은 무엇입니까?

뜨겁다태그

보관