html div style display 속성을 사용하여 화면 출력/숨김

DevOps/Web 2022. 7. 27. 16:56

내용

이벤트 발생 시점 div 에 정의된 내용을 출력 or 숨김 하고 싶은 경우

 

방법

html

<div class="row" id="test_div">
          ~~~~~
</div>

 

javascript

화면 출력
document.getElementById("test_div").style.display = "";

화면 숨김
document.getElementById("test_div").style.display = "none";

참고

https://www.w3schools.com/jsref/prop_style_display.asp

 

 

저작자표시 비영리 변경금지 (새창열림)

'DevOps > Web' 카테고리의 다른 글

html page snapshot -> html2canvas ( html 화면 이미지로 변환 )  (0) 2022.07.27
html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거  (0) 2022.07.14
html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기  (0) 2022.03.22
  • By SJinDBA

javascript 프로그램 실행 지연(sleep)

DevOps/Web 2022. 7. 27. 16:45

내용

일시적으로 실행을 멈추거나, 일정 시간동안 실행을 지연시키는 기능

 

방법

setTimeout( 실행 명령어, 지연 시간(마이크로초) )

'after'를 출력하는 문구는 3초후에 실행이됨, 하지만 'done' 문구가 먼저 출력된 이유는 javascript는 기본적으로 프로그램 실행을 막지 않는(non-block)방식이라 다음 코드가 먼저 실행됨

console.log("before");
setTimeout(() => console.log("after"), 3000);
console.log("done!");

-- 결과 --

before
done!
after

 

Promise 를 사용한 sleep( 지연 시간(마이크로초) ) 

비동기 지연

function sleep(ms) {
  return new Promise((r) => setTimeout(r, ms));
}

console.log("before");
sleep(3000)
  .then(() => console.log("after"))
  .then(() => console.log("done!"));

-- 결과 --

before
after
done!

 

참고

https://www.daleseo.com/js-sleep/

 

저작자표시 비영리 변경금지 (새창열림)

'DevOps > Web' 카테고리의 다른 글

html <div>, <span> tag 개념과 차이점  (0) 2022.07.27
html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거  (0) 2022.07.14
html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기  (0) 2022.03.22
javascript에서 여러 라인을 하나의 라인으로 처리 (Line continuation)  (0) 2021.12.11
  • By SJinDBA

summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거

DevOps/Web 2022. 7. 14. 13:31

현상

summernote에 작성되어 있는 내용을 javascript 로직으로 수정할때, <p><br></p> 구문이 자동으로 생성됨.

원인

summernote 버그로 v0.8.14버전에서 수정됨

https://github.com/summernote/summernote/issues/3495

해결

최신 버전인 v0.8.14버전으로 교체하였으나 여전히 발생하여,
summernote를 destroy 이후 재생성 하는 방법으로 해결

 

html

<textarea id="textarea_note" name="textarea_note">
</textarea>

js

new_note_data = '<table><tr><td>test value</td></tr></table>'

$('#textarea_note').summernote('reset');
$('#textarea_note').summernote('destroy');
$('#textarea_note').val(new_note_data);

$('#textarea_note').summernote({
    airMode: true
});

 

저작자표시 비영리 변경금지 (새창열림)

'DevOps > Web' 카테고리의 다른 글

html div style display 속성을 사용하여 화면 출력/숨김  (0) 2022.07.27
javascript 프로그램 실행 지연(sleep)  (0) 2022.07.27
html bootstrap(부트스트랩) param(매개변수)를 포함한 modal confirm(확인창) 만들기  (0) 2022.03.22
javascript에서 여러 라인을 하나의 라인으로 처리 (Line continuation)  (0) 2021.12.11
html summernote 사용하여 값 조회 / 입력 / 파일 처리  (0) 2021.12.11
  • By SJinDBA

to Top

티스토리툴바