jQuery CSS() 메서드
jQuery css() 메서드
jQuery css() 메서드
css() 메서드는 선택한 요소의 하나 이상의 스타일 속성을 설정하거나 반환합니다.
CSS 속성 반환
지정된 CSS 속성의 값을 반환하려면 다음 구문을 사용하세요.
css("propertyname");
다음 예에서는 첫 번째 속성의 배경을 반환합니다. 일치하는 요소 -색상 값:
Instance
<!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(){
alert("背景颜色 = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
CSS 속성 설정
지정된 CSS 속성을 설정해야 하는 경우 다음 구문을 사용하세요.
css("propertyname","value")
다음 예에서는 일치하는 모든 요소에 대해 배경색 값을 설정합니다.
예
<!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(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的 background-color </button>
</body>
</html>예제 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
여러 CSS 속성 설정
여러 CSS 속성을 설정해야 하는 경우 CSS 속성의 경우 다음 구문을 사용하세요.
css({ "propertyname":"value","propertyname":"value",...});
다음 예에서는 배경색과 글꼴을 설정합니다. 일치하는 모든 요소의 크기:
Example
<!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(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
