querySelector 메소드를 사용하는 방법
- 不言원래의
- 2019-02-14 15:23:1520696검색
querySelector() 메서드를 사용하면 지정된 CSS 선택기와 일치하는 문서의 요소를 반환할 수 있습니다. 대신 querySelectorAll() 메서드를 사용해야 합니다. querySelector 메소드 사용법.
querySelector()의 기본 구문을 살펴보겠습니다.
document.querySelector(CSS selectors)
CSS 선택기 하나 이상의 일치하는 요소를 나타내는 CSS 선택기입니다. ID, 클래스, 유형, 속성, 속성 값 등을 사용하여 요소를 선택할 수 있습니다.
참고: 선택자가 여러 개인 경우 쉼표를 사용하여 구분하세요.
구체적인 예를 살펴보겠습니다
코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 class="example">文本的标题</h2>
<p class="example"> 文本的段落。</p>
<button onclick="myFunction()">按钮</button>
<script>
function myFunction() {
document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>효과는 다음과 같습니다. "버튼"을 클릭하면, 텍스트 제목의 배경색이 아래와 같이 빨간색으로 변경됩니다.
이 글은 여기서 끝납니다. 더 흥미로운 내용을 보려면 주목하세요. PHP 중국어 웹사이트 컬럼 튜토리얼의 다른 관련 기사를 살펴보세요! ! !
위 내용은 querySelector 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.