jQuery

[jQuery] 11장 스타일시트 관련 메소드, 넓이와 높이 관련 메소드

반응형

 

스타일 시트 관련 메소드

 

 

메소드 설 명
css(name) 매치되는 첫 번째 요소의 스타일의 속성을 반환
ex) $(this).css(‘color’)
css(name, value) 매치되는 모든 요소들의 단일 스타일 속성을 설정
ex) $(this).css(‘color’ , ‘red’)
css(propertis) 매치되는 모든 요소들의 스타일 속성에 key : value를 설정
ex) $(this.).css({‘color’ : ’blue’, ‘font-size’ : ’20px’ })
addClass(class) 매치된 요소들의 집합에 지정된 css 클래스를 추가
hasClass(class) 지정된 클래스가 매치된 요소들의  집합 중 최소 한군데 이상 적용 되어 있으면 true를 리턴
removeClass(class) 매치된 요소들의 집합에서 지정된 css 클래스를 삭제 
toggleClass(class) 매치된 요소들에 지정된 클래스가 적용되지 않았다면 적용하고,  이미 적용되어 있다면  제거 

 

 

 

  • css, addClass
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
brdOlive {
  border: 2px dashed olive;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <input type="button" id="btn" value="확인">

        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $('#btn').on('click',function(){
    // $('p').css('color', 'red'); // css()의 우선순위가 더 높아 아래의 코드가 적용되지 않음
    $('p').addClass('clrLime'); // 효율적이며 유지보수성이 높음

  });
</script>
</body>
</html>

 

결과 화면1-1 : 확인 버튼 클릭 시

 

결과 화면1-2 : 확인 버튼 클릭 시 + 주석 풀었을 시

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
brdOlive {
  border: 2px dashed olive;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $('p').on('click',function(){
    $(this).addClass('bgPurple');
  });
</script>
</body>
</html>

 

결과 화면2 : 글자 클릭시

 

 

 

  • hasClass, removeClass
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>

  $('p').on('click',function(){
    if( $(this).hasClass('brdOlive') ) {
      // 클래스 제거
      $(this).removeClass('brdOlive');
    } else {
      // 클래스 추가
      $(this).addClass('brdOlive');
    }
  });
</script>
</body>
</html>

 

결과 화면3

 

 

 

  • toggleClass
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $('p').on('click',function(){
    $(this).toggleClass('bgPurple');
  });
</script>
</body>
</html>

 

결과 화면4 : 글자 다시 클릭 시 적용된 효과 사라짐

 

 

 

  • mouseover, mouseout
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
div:empty {
  padding: 10px;
  margin: 10px;
  border: 1px solid lightgray;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  // jQuery방식 이벤트 적용방식1 on()
  // jQuery방식 이벤트 적용방식2 event(fnc)
  $('div:empty').on('mouseover', function(){
    $(this).addClass('bgPurple');
  });
  $('div:empty').on('mouseout', function(){
    $(this).removeClass('bgPurple');
  });
</script>
</body>
</html>

 

결과 화면5 : 마우스를 가져다댈시 색상 변경, 때면 색 사라짐

 

=> hover 이벤트 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
div:empty {
  padding: 10px;
  margin: 10px;
  border: 1px solid lightgray;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive !important;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  // jQuery방식 이벤트 적용방식1 on()
  // jQuery방식 이벤트 적용방식2 event(fnc)

  // hover이벤트는 on()로 표현불가
  // mouserover and mouseout의 이벤트를 hover이벤트로 처리해줌
  $('div:empty').hover(function(){
    $(this).addClass('bgPurple');
  }, function(){
    $(this).removeClass('bgPurple');
  });

</script>
</body>
</html>

 

결과 화면6

 

 

=> jQuery방식 이벤트 적용방식1 on()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
div:empty {
  padding: 10px;
  margin: 10px;
  border: 1px solid lightgray;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive !important;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $('div:empty').on({mouseover:function(){
    $(this).addClass('brdOlive');
  },mouseout:function(){
    $(this).removeClass('brdOlive');
  }});
</script>
</body>
</html>

 

결과 화면7 : 마우스로 가져다댈 시 테두리가 변경됨. css의 우선순위로 인해 위에 순위 변경함

 

 

=> jQuery방식 이벤트 적용방식2 event(fnc)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
div:empty {
  padding: 10px;
  margin: 10px;
  border: 1px solid lightgray;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive !important;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  // mouseover and mouseout
  // mouseenter and mouseleave
  $('div:empty').on({mouseenter:function(){
    $(this).addClass('brdOlive');
  }, mouseleave:function(){
    $(this).removeClass('brdOlive');
  }});
</script>
</body>
</html>

 

결과 화면8

 

 

 

  • 더블 클릭시 테두리 변경
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
div:empty {
  padding: 10px;
  margin: 10px;
  border: 1px solid lightgray;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive !important;
  border-radius: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $('img').on('dblclick', function(){
    $(this).toggleClass('brdOlive');
  });
</script>
</body>
</html>

 

결과 화면9 : 사진 더블 클릭 시 테두리 변경

 

 

 

넓이와 높이 관련 메소드

 

 

메소드 설 명
width() 요소의 너비를 설정하거나 반환 (패딩, 테두리 및 여백 제외)
height() 요소의 높이를 설정하거나 반환 (패딩, 테두리 및 여백 제외)
innerWidth() 요소의 너비를 반환 (패딩 포함)
innerHeight 요소의 높이를 반환 (패딩 포함)
outerWidth() 요소의 너비를 반환 (패딩 및 테두리 포함)
outerHeight() 요소의 높이를 반환 (패딩 및 테두리 포함)

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  height: 200px;
}
div:empty {
  padding: 10px;
  margin: 10px;
  border: 1px solid lightgray;
}
.clrLime {
  color: lime;
}
.bgPurple 
{
  background-color: purple;
}
.brdOlive {
  border: 2px dashed olive !important;
  border-radius: 10px;
  padding: 10px;
}
</style>
</head>
<body>
    <div>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>
        <p>click!</p>

        <div></div>

        <div id="imgBox">
            <img src="../images/mang13.gif" alt="mang13">
            <img src="../images/mang10.gif" alt="mang10">
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $('img').on('dblclick', function(){
    $(this).toggleClass('brdOlive');

    console.log( $(this).width() ); // 순수한 컨텐츠 너비값만 반환 200px
    console.log( $(this).innerWidth() ); // 컨텐츠 너비값 + 패딩값 220px
    console.log( $(this).outerWidth() ); // 컨텐츠 너비값 + 패딩 값 + 보더 값 224px
  });

</script>
</body>
</html>

 

결과 화면10

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 13장 이벤트 연결 메소드  (0) 2024.02.23
[jQuery] 12장 이벤트  (0) 2024.02.23
[jQuery] 10장 요소 추가 메소드, 삭제 및 복사 메소드  (0) 2024.02.22
[jQuery] 9장 get/set 메소드3  (0) 2024.02.22
[jQuery] 8장 get/set 메소드2  (0) 2024.02.22

티스토리툴바