스타일 내기위한 자바스크립트

 

화면을 구성할때 스타일 내기위해 자주사용하는 자바스크립트를 정리해보려고 한다.

1. 부모의 자식요소 갯수를 구해 스타일로 분기처리 할때 

- 부모에 아이디값을 셀렉 후 자식요소의 length를 구한다.

- classList를 사용해 부모에 클라스를 추가해 스타일을 조건에 따라 활성화한다.

var listOrder = document.getElementById('listOrder'); 
var nodelist = listOrder.getElementsByTagName('li').length;
if(nodelist < 16){
    listOrder.classList.add('few')
} else{
    listOrder.classList.add('many')
}

2. 스크롤 헤더 sticky 효과 

- 부모에 아이디값을 셀렉 후 offsetTop으로 위치확인

- window.addEventListener을 사용해 스크롤 할때마다 호출해 위치를 파악한다.

- classList.add / classList.remove를 사용해 스타일 분기하여 조건에 따라 활성화한다.

var navbar = document.getElementById('beatWrap');
var sticky = navbar.offsetTop;
var scrollPosition = 0;
var ticking = false;
function doSomething(scrollPos) {
  if (window.pageYOffset  > sticky) {
    navbar.classList.add('onscroll')
  } else {
    navbar.classList.remove('onscroll');
  }
}
window.addEventListener('scroll', function(e) {
  scrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(scrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});

 

3. 팝업 

- style 프로퍼티명으로 직접 스타일 넣기

var modal = document.getElementById('wrapDimmed')
function popupPicture(){
    modal.style.display = 'block';
}
var PopupClose = function() {
    modal.style.display = 'none';
};

4. #태그 갯수에 따라 스타일 닫고 열기 스타일 

- 태그의 갯수를 파악해 .children을 사용해 for문에서 length로 분기

- className으로 스타일 처리

var listTag = document.getElementById('listTag');
var tagFold = document.getElementById('tagFold');
const $li = document.querySelector('#listTag').children;
// 2줄 이상부터 마지막 태그에 붙이기
for (var i = 0; i < $li.length; i++) {
    if($li.length < 6){
        listTag.className = 'list_tag'
    }
    if(listTag.offsetHeight > 64 || $li.length > 10){
        tagFold.classList.remove('hide');
    } 
}

5. 햄버거 메뉴(drawer menu), fold식 toggle 메뉴 

- HTML에서 버튼에 onClick에 직접사용

<li id="tagFold" class="hide" onclick="toggleClass(this.parentNode, 'fold')">
	<button type="button" class="btn_default">
    	<span class="ico_snippet ico_arr"></span>
    </button>
</li>

var toggleClass = function (element, tClass) {
    tClass = tClass.replace(/\s/g, "");
    var classes =  element.className;
    element.className = classes.indexOf(tClass) !== -1 
        ? classes.replace(" " + tClass, "")
        : classes + " " + tClass;
}

6. 값이 변경될때 호출 되는 이벤트 리스너 (파일첨부) 

- addEvnetListener을 이용해 input값이 바뀌면(change) e.target을 이용해 파일명 가지고 오기

- 파일이 첨부되면 class추가해 스타일 내기

var fileInput = document.getElementById('attachment');
var stateUpload = document.getElementById('stateUpload');
var attachedFileName = document.getElementById('attachedFileName');
fileInput.addEventListener('change',function(e){
    attachedFileName.innerHTML = e.target.files[0].name;
    attachedFileName.className = 'txt_attach txt_black'
    toggleClass(stateUpload, 'on');
})

7. 글자수세기 

<div class="area_item">
  <label class="lab_qna">제목</label>
  <span class="txt_count">(<span id="titleCount" class="txt_count">0</span>/50)</span>
  <input id="inpTitle" type="text" class="qna_basic inp_contents" maxlength="50" placeholder="제목을 입력하세요" onkeyup="handlerCount(titleCount, inpTitle)"/>
</div>
<div class="area_item">
  <label class="lab_qna">내용</label>
  <span class="txt_count">(<span id="contentsCount" class="txt_count">0</span>/1000)</span>
  <textarea id="inpContents" class="qna_basic inp_contents" maxlength="1000" placeholder="내용을 입력하세요" onkeyup="handlerCount(contentsCount, inpContents)"></textarea>
</div>

var titleCount =  document.getElementById('titleCount');
var contentsCount =  document.getElementById('contentsCount');
var inpTitle =  document.getElementById('inpTitle');
var inpContents =  document.getElementById('inpContents');
function handlerCount (id, counter){
    var maxLengthCount =  counter.getAttribute('maxlength');
    id.innerHTML = counter.value.length;
    if(maxLengthCount > counter.value.length > 0){
        id.className = 'txt_count txt_black'
    } else if(counter.value.length == maxLengthCount){
        id.className = 'txt_count txt_red'
    }
}

8. 타이머로 간단한 인터랙션 

setTimeout(function(){
	toggleClass(selectFold,'fold')
},3000);

9. 숫자키패드를 클릭해 핸드폰 번호 입력하기

<input type="text" id="inpNumber" class="inp_call" value="010-"/>
            <div class="tab_tell">
                <table>
                    <tr>
                        <td>
                            <button type="button" class="btn_num">1</button>
                        </td>
                        <td>
                            <button type="button" class="btn_num">2</button>
                        </td>
                        <td>
                            <button type="button" class="btn_num">3</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn_num">4</button>
                        </td>
                        <td>
                            <button type="button" class="btn_num">5</button>
                        </td>
                        <td>
                            <button type="button" class="btn_num">6</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn_num">7</button>
                        </td>
                        <td>
                            <button type="button" class="btn_num">8</button>
                        </td>
                        <td>
                            <button type="button" class="btn_num">9</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn_num" style="font-size:0">Delete<span class="ico_delete"></span></button>
                        </td>
                        <td>
                            <button type="button" class="btn_num">0</button>
                        </td>
                        <td>
                            <button type="button" class="btn_num" style="font-size:0">Reset<span class="ico_clear"></span></button>
                        </td>
                    </tr>
                </table>
            </div>

var displayTell = document.getElementById('inpNumber'),
    keys = document.querySelectorAll(".btn_num"),
    value;
for (i = 0; i < keys.length; i++) {
  keys[i].addEventListener("click", clicked);
}
function clicked() {
  var key = this.innerText || this.textContent;
  keyPressed(key);
}
window.addEventListener("keydown", function(e) {
  e = e || window.event;
  console.log('TEST', e)
  keyPressed(e.key);
});
function keyPressed(key) {
    var val = displayTell.value;
    if (isNaN(key)) {
        switch (key) {
        case "Delete":
            displayTell.value = val.substring(0, val.length - 1)
            break;
        case "Reset":
            resetDisplay();
            value = "";
            break;
        }
    }else{
        if (val.length < 12) {
            displayTell.value += key;
        }
    }
}
function resetDisplay() {
    displayTell.value = "010-";
    displayTell.placeholder = '';
}