태그 내용 글자 색상, 배경
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('h1').on('click', function() {
$('h1').css({
color : 'blue',
backgroundColor : 'black'
});
});
})
</script>
<h1>안녕하세요</h1>
</body>
</html>
list 글자색상
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>우럭</li>
<li>새우</li>
<li>소라</li>
<li>문어</li>
</ul>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$('li').css({
color : 'yellow'
});
</script>
</body>
</html>
클래스 추가, 삭제
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
cursor: pointer;
}
.end {
background-color: black;
width: 500px;
height: 500px;
cursor: default;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$('.box').on('click', function() {
$('.box').addClass('end');
$('.box').removeClass('box');
})
</script>
</body>
</html>
this의 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
.printLine {
font-size: 100px;
color: green;
cursor: pointer;
}
.resultLine {
font-size: 200px;
color: yellow;
}
</style>
</head>
<body>
<h1>여러분 안녕하세요!</h1>
<h1>여러분 안녕하세요!</h1>
<h1>여러분 안녕하세요!</h1>
<h1>여러분 안녕하세요!</h1>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$('h1').on('click', function() {
$(this).html('잘가세요');
$(this).css({
backgroundColor : 'black',
color : 'yellow'
})
});
</script>
</body>
</html>'Programming > Javascript' 카테고리의 다른 글
| 학생 목록 list로 관리하기 (ajax 활용) (0) | 2020.03.08 |
|---|---|
| 리스트 항목추가하기 (ajax를 활용하여 영화 순위 리스트로 가져오기) (0) | 2020.03.08 |
| 준비물 메모장 구현 실습 (0) | 2020.03.08 |
| addEventListener 실습 (0) | 2020.03.08 |
| 버튼을 눌러 이미지 사라지기 (0) | 2020.03.08 |