728x90 반응형 JQuery8 width, innerWidth, outerWidth의 차이점 자바스크립트를 하다보면 요소의 길이를 알고 싶을때가 있다. 그때 쓸 수 있는게 .width() 인데 이 width값은 여러가지의 경우가 있다. .width() : 요소의 너비값만 구할 경우 .innerWidth() : 요소의 너비 값 + padding을 더한 값 .outerWidth() : 요소의 너비 값과 padding + border를 더한 값 .outerWidth(true) : 파라미터에 true를 넣을 경우 요소의 width, padding, border, margin을 모두 포함한 값을 나타낸다. ex) .box {width: 50px; height: 50px; padding: 10px; margin: 10px; border: 5px solid #000;} 경우, $('.box').width().. 2021. 9. 6. 클릭하면 지정 섹션으로 자연스럽게 이동하기 $('.target').on('click', function(){ var targetTop = $('.target').offset().top; $('html, body').stop().animate({scrollTop : targetTop}, 1000) }); - stop() : 현재 동작하고 있는 애니메이션은 즉시 동작이 중단 된다. 2021. 7. 5. [jquery] 이벤트 여러개 설정하기 $('input').on({ focus : function() { $(this).closest('div').addClass("step01"); if($(this).val() == "") { $(this).closest('div').removeClass(step02"); } }, change : function() { $(this).closest('div').addClass("step02") if($(this).val() == "") { $(this).closest('div').removeClass("step01") $(this).closest('div').removeClass("step02") } }, blur : function() { if($(this).val() == "") { $(this).clo.. 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. 제이쿼리에 미디어쿼리 사용하기 // 01 if(matchMedia("screen and (max-width:768px)").matches){} // 02 if (window.matchMedia("(min-width: 400px)").matches) { /* 뷰포트 너비가 400 픽셀 이상 */ } else { /* 뷰포트 너비가 400 픽셀 미만 */ } ** matchMedia() 메서드 : 분석할 미디어 쿼리를 나타내는 문자열 ** matches() 메서드 : 요소가 일치하는지 여부를 나타낸다. *** 하지만, 사용결과 if($(window).width() >= 768) {}이 최고인것 같다 :) 2021. 6. 23. 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 2 다음 728x90 반응형
