
클래스 속성 추가 방법 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값이다.
객체명.속성명=속성값

'JavaScript' 카테고리의 다른 글
[js] JavaScript 배열 __개발공부 69일차 (0) | 2022.06.03 |
---|---|
[js] JavaScript 함수(2) __개발공부 69일차 (0) | 2022.06.02 |
[js] JavaScript개요 __개발공부 67일차 (0) | 2022.06.01 |