jquery의 css 메서드를 사용하면 특정 요소에 css 속성을 추가할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--제이쿼리-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
.title {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div class="title">
bskyvision
</div>
<script>
$('.title').click(function(){
$('.title').css({"color": "blue", "font-size": "20px"});
});
</script>
</body>
</html>
|
cs |
위와 같이 코딩해주면 본래 color는 red, font-size는 50px 였던 title 클래스 요소는 클릭하면 color는 blue로, font-size는 20px로 바뀌게 됩니다.
바뀌었다기보다는 기존의 것보다 더 우선순위가 높다고 표현이 좀 더 정확하겠네요. ㅎㅎ 다음과 같이 css가 추가되면서 기존의 동일한 속성의 css들을 무효화 시키니까요.
'Dev > javascript' 카테고리의 다른 글
| [jquery] 열려있는 팝업 사이드바 외부 영역 클릭시 닫히게 하기 (6) | 2021.02.11 |
|---|---|
| [javascript] Math 객체를 이용해서 반올림, 올림, 내림하기 (0) | 2020.12.17 |
| [javascript] javascript의 for in/for of 와 python의 for in 비교 (3) | 2020.12.15 |
| [javascript] textarea에 기록된 내용 지우기 (6) | 2020.12.14 |
| [jquery] html 메서드 정리 (0) | 2020.12.11 |
| [javascript] 정의와 동시에 호출이 가능한 즉시실행함수 (0) | 2020.12.10 |
| [jquery] textarea 최대 100자까지만 입력 가능하게 하기 (2) | 2020.12.09 |
| [javascript] checkbox 체크되었을 때 1, 안 되었을 때 0을 제출하고 싶다면 (11) | 2020.12.08 |