HTML 요소의 CSS 속성 읽기 및 쓰기
- 高洛峰원래의
- 2016-11-24 09:46:261396검색
jQuery의 css() 메서드는 HTML 요소의 CSS 속성을 설정하거나 읽는 데 사용됩니다.
요소를 읽는 CSS 구문은 다음과 같습니다.
css("propertyname");
예를 들어, 다음 코드는 첫 번째 요소.
[javascript]
$("p").css("배경색")
$("p"). css("Background-color");
HTML 요소의 CSS 속성을 설정하려면 다음 구문을 사용하세요.
css("propertyname" ,"value");
예를 들어 다음 코드는 모든
요소의 배경색을 노란색으로 설정합니다.
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color: #ff0000">This is a paragraph.</p>
<p style="background-color: #00ff00">This is a paragraph.</p>
<p style="background-color: #0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color: #ff0000">This is a paragraph.</p>
<p style="background-color: #00ff00">This is a paragraph.</p>
<p style="background-color: #0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>www.2cto.com
<button>Set background-color of p</button>
</body>
</html>
css()는 동시에 여러 CSS 속성도 지원합니다. 구문은 다음과 같습니다.
css({"propertyname": "value", "propertyname":"value",…});
예:
[javascript] view plaincopyprint?
$("p"). css({"배경 -색상":"노란색","글꼴 크기":"200%"})
$("p").css({"배경 -color":" 노란색","font-size":"200%"});
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 노드 속성 작업다음 기사：HTML 노드 속성 작업