클래스 속성 추가 방법 3가지

 

첫번째 방법 : classList.add() 를 활용

document.querySelector("#txtMsg").classList.add();/remove()/replace()
document.querySelector("#txtMsg").classList.add("inputlcs");

두번째 방법 : className을 사용
document.querySelector("#txtMsg").className="inputlcs";

세번째 방법 : setAttribute 사용
document.querySelector("#txtMsg").setAttribute("class","inputlcs");

 

 

 

버튼 활성화/ 비활성화

요소.disabled=true;

요소.disabled=false;

 

 

 

JavaScript 스타일 지정방법

 

var pelemt = document.querySelector("#demo")

 

pelemt.style.color="red"; 
pelemt.style.fontsize="red"; 
pelemt.style.border="1px solid aqua";

 

style 은 태그 에서 style="color:"";" 이런식으로 쌍따옴표 안에 
또 쌍따옴표가 들어가는 것이기 때문에 .style.color 처럼 .이 두번 찍히는것이다.

 

 

또는

 

demostyle 이라는 스타일을 선언해 주고 className으로 속성을 설정해 준다.

 

<style>
   .demostyle{
      color:red; 
      font-Size:35px; 
      border:1px solid gray;
   }
</style>

 

pElemt.className ="demostyle";

 

 

JavaScript 데이터 출력 함수

 

[js 데이터 출력 가능]
1.document.write();
2.window.alert() - 경고창으로 데이터 출력
alert()
3.console.log() - 브라우저 콘솔 창에 데이터 출력(디버깅 목적)
4.innerText     -div, p html요소 출력 == text()    [jquery 메서드 중]
  innerHTML  -div, p html요소 출력 ==      html()    [jquery 메서드 중]

 

 

 

라디오 버튼 체크했는지 확인 방법

 

checked 함수를 사용한다.

document.getElementById("g_male").checked

 

 

nextElementSibling

 

다음 요소 형제의 값을 불러온다.



<fieldset>
    <legend>성별</legend>
    <input type="radio" name="gender"id="g_male" checked="checked"value="male"><label for="g_male">남자</label>
    <input type="radio" name="gender"id="g_female"value="female"><label for="g_female">여자</label>
</fieldset>
<br>
<button>성별확인</button>

<pre>라디오 버튼을 남/여 어떤 것을 체크 했는지 확인</pre>

<p id="demo">성별출력</p>

<script>
document.querySelector("button").onclick=function(){

 

    var genderRadios = document.querySelectorAll("[name='gender']");
    for (var i = 0; i < genderRadios.length; i++) {
        if(genderRadios[i].checked){

                       //document.getElementById("demo").innerText=genderRadios[i].nextElementSibling.value;
                       //여기서 다음 요소 형제는 label인데, 여기서는 value값이 없어서 undefined가 나온다. 

                        //따라서 아래와 같이 코딩을 해야한다.

           document.getElementById("demo").innerText=genderRadios[i].nextElementSibling.innerText;

            break;
       }//if
    }//for
}//onclick
</script>

 

 

Select Box 관련 함수

 

ㄱ. onchange 

: select 태그를 열어서 하나의 option을 선택했을 때 발생하는 이벤트 

  (=select 박스 열어서 하나를 선택할때 일어나게 하고 싶을때)

 


ㄴ. selectedIndex 

:  select 태그를 열어서 하나의 option을 선택했을 때 선택된 option의 Index 번호

 

var s = document.getElementById("subject");

alert(s.selectedIndex); //선택된인덱스


ㄷ. options 컬렉션

options[index번호].text

-index번호에 해당되는 option 태그 안에 있는 text를 불러온다.

 

var o_text = s.options[s.selectedIndex].text;

 

options[index번호].value
-index번호에 해당되는 option 태그의 value 값을 가져온다.

 

var o_value =  s.options[s.selectedIndex].value;

 

        document.getElementById("demo").innerText=o_value+"/"+o_text;

 

 

 

참고

 

input 태그의 입력값은 value값이다. 

 

객체명.속성명=속성값

 

복사했습니다!