[jQuery] 제이쿼리를 이용하여 css 접근하기
jQuery를 이용하면 css를 제어할 수 있다.
| $("범위(클래스/ID/태그 등").css("스타일","스타일 값"); |
범위 설정 방법
ex)
-
form input : form 태그 자손중 input 만
-
form input[type=text] : form 태그 자손중 input의 type=text 만
-
form input[name*=x] : form 태그 자손중 input의 name에 x를 포함
-
form input[name$=c] : form 태그 자손중 input name에 c가 마지막에 오는 이름만
-
form input[name^=b] : form 태그 자손중 input name에 b로 시작하는 이름만
-
form :not(input[type=text],p) : form 태그 자손중 input type=text인것과 p태그는 제외
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 3px solid #999;
margin: 30px auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
//제이쿼리를 이용해서 css 접근하는 방법
$("*").css("font-size","25px"); // 모두 선택시에
$("span").css("color","blue");//태그 선택자
$("#div1").css("color","red");//id 선택자
$(".cls1").css("background","#ff0");//클래스 선택자(cls1 배경 변경)
$("span, label").css("font-family","궁서");//span, label 글꼴 변경
$("form input").css("background","#e4e4e4");//form 태그 자손중 input
$("form input[type=text]").css("border","none");//type=text만
$("form input[type=text]").css("border-bottom","2px solid black");//type=text만
$("form input[name*=x]").css("border-right","3px solid black");//name에 * 포함
$("form input[name$=c]").css("border-left","3px solid black");//name 마지막 c
$("form input[name^=b]").css("border-top","3px solid black");//name 시작 b
$("form :not(input[type=text],p)").css("background","navy");//input의 type=text아닌 것에 스타일 //p태그도 제외
});
</script>
</head>
<body>
<div id="div1">테스트1</div>
<div id="div2">테스트2</div>
<div id="div3" class="cls1">테스트3</div>
<span>테스트4</span><br>
<span>테스트5</span><br>
<div id="div4" class="cls1">테스트 6</div>
<span class="cls2">테스트7</span><br>
<label class="cls2">테스트8</label><br>
<hr>
<p> <input type="text" name="abc1"> </p>
<form>
<p> <input type="text" name="abc"> </p>
<p> <input type="text" name="abx"> </p>
<p> <input type="text" name="bba"> </p>
<p> <input type="text" name="bbb"> </p>
<p> <input type="text" name="axc"> </p>
<p> <input type="button" value="등록하기"> </p>
<p> <input type="reset" value="다시입력"> </p>
</form>
</body>
</html>
|
cs |
'Web > jQuery' 카테고리의 다른 글
| [jQuery] 셀렉터(2) (0) | 2020.11.17 |
|---|---|
| [jQuery] 주요 셀렉터 & 필터 셀렉터 (0) | 2020.11.17 |
| [jQuery] 태그의 자손, 자식, 형제 범위 설정하는 법 (0) | 2020.11.16 |
| [jQuery] 제이쿼리의 기본 속성 (1) -window.onload와의 유사점 (0) | 2020.11.16 |
| [jQuery] 제이쿼리란? (0) | 2020.11.13 |
댓글