728x90 반응형 Javascript4 height: auto; 애니메이션 주기 기존 height값에서 버튼 클릭시 자동으로 높이값을 주려고 height: auto;로 준 뒤 transition으로 애니메이션 효과를 주려고했는데 실행이 안되서 구글링을 하다가 발견한 스크립트이다. html tab_01 내용 script $('.tab').on('click', function(){ var el = $('.tab-contents'), curHeight = el.height(), // 현재 정해져 있는 높이 값 autoHeight = el.css('height', 'auto').height(); // 원래 가지고 있는 높이 값 if(조건){ el.height(curHeight).animate({height: autoHeight}, 500); } else{ el.animate({height:.. 2022. 3. 7. [javascript] 해당 src 속성 값 가져와 이미지 교체하기 html 구조 javascript var bigImg = document.querySelector('#big'); //큰 이미지 가져오기 var sImg = document.querySelectorAll('.simg'); //작은 이미지들 노드 리스트로 가져옴 for(var i = 0; i < sImg.length; i++) { sImg[i].onclick = showImg; //노드를 클릭하면 showImg 함수 실행 } function showImg() { var newImg = this.src; //클릭 이벤트가 발생한 대상의 src 속성 값을 가져옴 bigImg.setAttribute('src', newImg); //newImg 값을 큰 이미지의 src 속성 값에 할당 //또는 big.src = .. 2021. 6. 29. 제이쿼리를 자바스크립트로 바꿔 쓰기 scrollTop > pageYOffset $("#content") - 돔(DOM 스타일) > document.getElementById("content") document.querySelector("#content") addClass > classList.add removeClass > classList.remove hasClass > classList.contains text() > textContent click(function(){}) > addEventListener('click', function(){}) this > elem ** document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다. ID.. 2021. 6. 28. textarea 자동 사이즈 조절하기 자바스크립트 function resize(obj) { obj.style.height = '1px'; obj.style.height = (10+obj.scrollHeight)+'px'; //10이라는 숫자는 처음 keydown될때 늘어나는 height값(숫자설정을 안해도 무관하다.) } 제이쿼리 function resize(obj) { $(obj).css('height','1px'); $(obj).css('height',$(obj).prop('scrollHeight') + 'px'; } //또는 function resize(obj) { var scroll = $(obj).prop('scrollHeight'); $(obj).css('height','1px'); $(obj).css('height',scroll.. 2021. 6. 23. 이전 1 다음 728x90 반응형
