jQuery - CSS 클래스 가져오기 및 설정

jQuery 조작 CSS

jQuery에는 CSS 조작을 위한 여러 가지 방법이 있습니다. 다음 내용을 학습합니다:

addClass() - 선택한 요소에 하나 이상의 클래스 추가

removeClass() - 선택한 요소에서 하나 이상의 클래스 제거

toggleClass() - 선택한 요소에 추가 /클래스 삭제 전환 작업

css() - 스타일 속성 설정 또는 반환

stylesheet

.important

{

font-weight:bold;

font-size :xx-large;

}

addClass() 메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>段落1</p>
<p>段落2</p>
<div>文本</div>
<br>
<button>为元素添加 class</button>
</body>
</html>

addClass() 메서드에서 여러 클래스를 지정할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">文本。</div>
<div id="div2">文本。</div>
<br>
<button>为第一个元素添加类</button>
</body>
</html>

removeClass() 메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">段落1</p>
<p>段落2</p>
<br>
<button>从元素中移除 class</button>
</body>
</html>

t oggleClass() 메소드

이 메소드는 선택한 요소에 대해 클래스 전환 작업 추가/삭제를 수행합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">段落1</p>
<p>段落2</p>
<br>
<button>切换 class</button>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ $("div").addClass("border reset"); }) }) </script> <style type="text/css"> div{ height:100px; width:200px; } .border{ border:2px solid blue; } .reset{ font-size:20px; color:green; } </style> </head> <body> <div>php.cn欢迎您</div> <button id="btn">点击查看效果</button> </body> </html>

제출하다 코드 재설정

자동운전