728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
<input type="text" id="user" value="koreait">
<div class="welcome box">Hello world</div>
<ul id="users">
<li id="1" data-user-id="1234">홍길동</li>
<li id="2" data-user-id="5678">김나나</li>
</ul>
<script>
const userInput = document.getElementById('user');
// 속성값 취득
const userInputVal = userInput.getAttribute('value')
console.log(userInputVal);
// 속성값 변경
userInput.setAttribute('value', 'webstudy');
// 속성값 존재 확인
console.log('id 속성 존재? >>',userInput.hasAttribute('id'));
// 속성값 삭제
userInput.removeAttribute('value');
userInput.value = 'test';
console.log(userInput.value);
console.log(userInput.attributes);
console.log(userInput.attributes.id.value);
console.log(userInput.attributes.type.value);
// console.log(userInput.attributes.value.value);
for(let attr of userInput.attributes){
console.log(attr);
}
const users = [...document.getElementById('users').children];
users.forEach( user => {
console.log(user.dataset.userId);
});
const user5678 = users.find( user => { return user.dataset.userId === '5678'});
console.log(user5678);
document.getElementsByTagName('li').item(0).style.color = 'red';
document.getElementsByTagName('li').item(0).style.backgroundColor = 'black';
document.getElementsByTagName('li').item(0).style.lineHeight = '3';
document.getElementsByTagName('li').item(0).style['line-height'] = '1';
document.getElementsByTagName('li').item(0).style['height'] = '100px';
console.log(document.getElementsByTagName('li').item(0).style.color);
const box = document.querySelector('div');
console.log(box.className);
box.className = box.className.replace('welcome', 'hello');
box.classList.add('welcome');
box.classList.remove('box');
box.classList.replace('welcome','come');
box.classList.toggle('box',true); // 있으면 삭제 / 없으면 생성(true/false 가능)
box.classList.contains('come');
console.log(box.classList);
</script>
</body>
</html>300x250
const aTag = document.getElementsByTagName('a').item(0);
// 복제된 a 태그에 class 속성을 부여한다.
aTag.classList.add('site');
// a태크를 넣을 부모요소 div를 가져온다.
const container = document.getElementById('container');
for(let i = 1; i <= 5; i++){
// a 태그 노드를 복제한다.
const aTagClone = aTag.cloneNode();
// 복제된 a 태그의 href 속성 내가 원하는 걸로 변경한다.
aTagClone.setAttribute('href','https://search.naver.com/search.naver?where=nexearch&query=test'+i)
// 복제된 a 태그의 내부 텍스트를 변경한다.
aTagClone.textContent = 'test'+i;
// 홀수번째 복제테그에는 color와 text-dacoration style을 추가한다.
if(i % 2 !== 0){
aTagClone.style.color = 'rgb(255,0,0)';
aTagClone.style.textDecoration = 'none';
}
// div의 자식으로서 추가한다.
container.appendChild(aTagClone);
}
// div container의 마지막 자식 요소에 font-size스타일 설정
container.lastElementChild.style.fontSize = '30px';
// h1테그를 생성한다
const h1Tag = document.createElement('h1');
// h1 태그의 텍스트를 변경한다
h1Tag.textContent = '이동링크 페이지1';
// 부모 div태그의 가장 첫 a 태그 전 위치에 h1 태그를 삽입한다.
container.insertBefore(h1Tag, aTag);
container.insertAdjacentHTML('afterbegin','<h1>이동링크 페이지2</h1>');
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: beige;
}
.box{
width: 100px;
height: 200px;
background-color: chocolate;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">BOX</div>
<script>
const box = document.querySelector('.box');
// style 프로퍼티는 인라인 스타일만 반환...
// box.style.backgroundColor = 'red';
// ComputedStyle은 요소 노드에 적용되어있는 모든 스타일을 종합해서 가져옴
// 링크스타일, 인라인, JS에 설정한 몯느 스타일이 적용되어진 최종 스타일
const computedBox = window.getComputedStyle(box);
let background = computedBox.backgroundColor;
// rgb(?, ?, ?)
// setInterval(() => {
let strtIndex = background.indexOf('(');
background = background.substring(strtIndex + 1 , background.length -1);
background = background.split(',');
let r = background[0].trim();
let g = background[1].trim();
let b = background[2].trim();
box.style.backgroundColor = `rgb(${r}, ${g}, ${10 + b})`;
// });
// box.style.backgroundColor = background;
// box.style.width = '500px';
// console.log(computedBox.widows);
// console.log(computedBox.backgroundColor);
// console.log(computedBox.border);
// console.log(computedBox.height);
</script>
</body>
</html>728x90
반응형
'코딩일지 > WEB' 카테고리의 다른 글
| addEventListener 활용2 (0) | 2023.01.03 |
|---|---|
| addEventListener 활용1 (0) | 2023.01.03 |
| js 기초5 (0) | 2023.01.01 |
| js 정규식 연습1 (0) | 2023.01.01 |
| js 정규식 (2) | 2023.01.01 |