믹아의 개발일기

Button이 여러개가 있다.

<!-- HTML -->

<button name='btn' id='a'>a</button>
<button name='btn' id='b'>b</button>
<button name='btn' id='c'>c</button>
<button name='btn' id='d'>d</button>
<button name='btn' id='e'>e</button>
<button name='btn' id='f'>f</button>
<button name='btn' id='g'>g</button>
<button name='btn' id='h'>h</button>

각 버튼을 눌렀을 때 id를 가져와보자

// javascript

// Name 으로 button 들을 가져온다
var btns = document.getElementsByName("btn");

// 가져온 버튼들(NodeList)에 forEach 로 EventListener 를 추가해준다.
btns.forEach(element => element.addEventListener('click', function(e){

    // e는 클릭 이벤트, e.target 으로 클릭된 객체를 가져온다.
    console.log(e.target);
    console.log(e.target.id);
    
    // a 를 눌렀을 때 :
    // <button name="btn" id="a">a</button>
    // a
}))

var btns = document.getElementsByName("btn")

btns.forEach(element => element.onclick = function(element){
    console.log(e.target)
    console.log(e.target.id)
})

물론 onclick 으로도 가능하다

Google Chrome 에서 동작

비디오 태그에 controls 라는 옵션을 주면

밑에 비디오를 컨트롤하는 UI가 띄워진다.

근데 내가 필요 없는, 숨겨야 하는 버튼이 있는 경우 숨길 수 있다. (전체화면, 재생 등)

<video controls> </video>

/* style.css */

/* 숨기려는 버튼을 골라서 쓰자 */

/* 전체화면 버튼 */
video::-webkit-media-controls-fullscreen-button {}

/* 일시정지, 재생 버튼 */
video::-webkit-media-controls-play-button {}

/* 재생 슬라이드..? */
video::-webkit-media-controls-timeline {}

/* 현재 진행 시간 */
video::-webkit-media-controls-current-time-display{}

/* 전체 시간 */
video::-webkit-media-controls-time-remaining-display {}

/* 음소거 버튼 */
video::-webkit-media-controls-mute-button {}

/* 볼륨 조절 슬라이드 */
video::-webkit-media-controls-volume-slider {}

/* 괄호에 display: none !important; 를 추가하면된다.
 예 ) 전체화면 전환 버튼을 숨긴다. 
 다만 더블클릭으로 전체화면이 되는 기능등은 그대로고 단지 버튼만 없앤다. */

video::-webkit-media-controls-fullscreen-button {
	display: none !important;
}