● 스타일 바꾸기
<body>
<h1 id="h1Tag">변경할 대상</h1>
<button onclick="ch()"> 변경!</button>
<script>
let ch =()=>{
Element의 스타일을 변경
Element.style.속성이름 = '속성값'
document.getElementById("h1Tag").style.color = 'red'
배경색 검정색, 글자색은 노랑색
// ver.TagName
document.getElementsByTagName('h1')[0].style.color = 'yellow'
document.getElementById("h1Tag").style.backgroundColor='black'
}
</script>
</body>
document.getElementsByTagName('h1')[0].style.color = 'yellow'
document.getElementById("h1Tag").style.backgroundColor='black'
-> body 태그 안의 h1에 접근하는 방법
1.document.getElementsByTagName('h1')[0]
=> Tag이름의 인덱스로 접근(같은 태그 위쪽 0번째부터 시작)
2. document.getElementById("h1Tag")
=> 태그의 ID나 Class등으로 접근
변경전!
변경후!
● 상자바꾸기
// ver2 TagName을 이용
1. magin이라는 함수 생성
1-1 div 두번째 상자는 100px, 세번째 상자는 네번째 상자는 300px
만큼 margin-left를 줄것!
1-2 Tagename, for문을 이용하는데 어렵다면 => ID로 이용
2. radius 라는 함수를 생성
1-1 border-top-right-radios=> 50%
1-2 border-bottom-left-radius => 50%
이 때, JS 의 영역에서 CSS 속성을 적고싶다면
Camel Case로 적을것
(일반) border-top-right-radius
(Camel) borderTopRightRadius
let boxMove=document.getElementsByTagName("div")
let margin =( ) => {
for(let i=0; i<boxMove.length;i++){
boxMove[i].style.marginLeft=i*100+"px"
}
}
let radius =() =>{
for(let i=0; i<boxMove.length;i++){
boxMove[i].style.borderTopRightRadius="50%"
boxMove[i].style.borderBottomLeftRadius="50%"
}
}
해석
왼쪽에 마진(여백)을 i*100px씩 i번째 박스에 여백을줌
let margin =( ) => {
for(let i=0; i<boxMove.length;i++){
boxMove[i].style.marginLeft=i*100+"px"
}
0~i번째 박스까지 오른쪽위, 왼쪽아래 둥글기를 50%로 맞춰줌.
let radius =() =>{
for(let i=0; i<boxMove.length;i++){
boxMove[i].style.borderTopRightRadius="50%"
boxMove[i].style.borderBottomLeftRadius="50%"
}
처음화면
이동하기 눌렀을때
둥글게 눌렀을때
이동하기 + 둥글게 눌렀을때
● 사진바꾸기
<body>
<img src="https://histimes.com/wp-content/uploads/2022/06/1654768715_2_Image-780x470.jpg" width="300px" id="img1">
<button onclick="ch()">이미지 변경!</button>
<script>
let img = document.getElementById('img1')
let ch = () =>{
// 속성의 값을 변경?
// Element.속성이름 = '속성값'
// 만약에 ID가 img1인 태그의 src 속성이 1번 사진이라면 => 2번
// 만약에 ID가 img1인 태그의 src 속성이 2번 사진이라면 => 1번
if(img.src=="https://histimes.com/wp-content/uploads/2022/06/1654768715_2_Image-780x470.jpg"){
img.src = 'https://cdn.mground.kr/mground/2021/12/%EA%B3%A0%EC%96%91%EC%9D%B4-%EC%9A%94%EB%A6%AC%EC%82%AC.jpg'
}
else {
img.src = "https://histimes.com/wp-content/uploads/2022/06/1654768715_2_Image-780x470.jpg"
}
}
</script>
</body>
사진 1 주소: https://histimes.com/wp-content/uploads/2022/06/1654768715_2_Image-780x470.jpg
사진 2 주소: https://cdn.mground.kr/mground/2021/12/%EA%B3%A0%EC%96%91%EC%9D%B4-%EC%9A%94%EB%A6%AC%EC%82%AC.jpg
사진 1
사진2
버튼 눌렀을때 사진1 -> 사진2 , 사진2 -> 사진1
● 이벤트
<body>
<button class="btn">클릭!</button>
<!-- 클릭2 버튼을 눌렀을 때, console창에 '클릭2 실행!'이라고 띄워줄것!
단, 두번 뜨지 않게 할것 & 위쪽 클릭 버튼을 눌렀을 때 console에 아무것도 뜨지 않게 할것
또한, Html 문서를 절대 손대지 않을 것
-->
<p>
<button class="btn">클릭2</button>
</p>
<script>
콜백함수
1. 어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때
내가 아닌, 시스템에서 호출해주는 함수
2. 함수 파라미터 안에 들어가는 함수 (가로안에 또 함수가 있는 것)
이벤트 핸들러 & 리스너
어떤 이벤트가 발생했을 때, 특정 함수를 실행해주는 구문
// addEventListener()
document.querySelector('.btn').addEventListener('click',function(){
console.log('클릭되었습니다.')
})
document.querySelector('p>.btn').addEventListener('click',()=>{
console.log('클릭2')
})
</script>
</body>
위 클릭버튼 눌렀을때(document.querySelector('.btn').addEventListener('click',function(){})
콘솔창에 출력(console.log('클릭되었습니다.'))
아래 클릭버튼 눌렀을때(document.querySelector('p>.btn').addEventListener('click',()=>{)
콘솔창에 출력(console.log('클릭2'))
'개발 공부 > JS, JQuery' 카테고리의 다른 글
| Jquery 이벤트, this 키워드 (0) | 2023.10.19 |
|---|---|
| Jquery란, 준비방법, 문법, 스타일 제어 (0) | 2023.10.19 |
| jQuery 사용 방법, 다운로드 방법 (1) | 2023.10.19 |
| 자바스크립트 DOM (0) | 2023.10.19 |
| 자바스크립트로 문자열 포매팅 구현하기. String.format() (0) | 2023.10.18 |
