내가 보려고 정리하는 블로그
jQuery 선택자 2 본문
//$(선택자 요소).css({'속성명':'속성값'});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery002_selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$(선택자 요소).css({'속성명':'속성값'});
//전체속성에 스타일 적용
$('*').css({'margin':'0','padding':'0', 'border-size':'0'});
//태그명에 스타일 적용
$('div').css({'background-color':'green',
'width':'200px' , 'height':'200px'});
//아이디 이름으로 스타일 적용
$('#line').css({'color':'blue'})
//클래스명으로 스타일 적용
$('.common').css({'border':'1px solid black'});
//태그명의 속성에 스타일 적용
$('a[href]').css({'color':'red'});
});
</script>
</head>
<body>
<div></div>
<p id="line">line</p>
<p class="common">common</p>
<a href="#">korea</a>
</body>
</html>
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery002_selector</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //$(선택자 요소).css({'속성명':'속성값'}); //전체속성에 스타일 적용 $('*').css({'margin':'0','padding':'0', 'border-size':'0'}); //태그명에 스타일 적용 $('div').css({'background-color':'green', 'width':'200px' , 'height':'200px'}); //아이디 이름으로 스타일 적용 $('#line').css({'color':'blue'}) //클래스명으로 스타일 적용 $('.common').css({'border':'1px solid black'}); //태그명의 속성에 스타일 적용 $('a[href]').css({'color':'red'});
});
</script> </head> <body> <div></div> <p id="line">line</p> <p class="common">common</p> <a href="#">korea</a> </body> </html> |
cs |
'프론트엔드 > JQUERY' 카테고리의 다른 글
| jQuery 이미지 슬라이더 BXSlider (0) | 2020.01.06 |
|---|---|
| jQuery UI 날짜선택기 datepicker (0) | 2020.01.06 |
| jQuery 선택자 (0) | 2019.06.26 |
| jQuery 라이브러리 연동하기 (0) | 2019.06.26 |