Phương thức HTML DOM querySelector () trả về phần tử đầu tiên khớp với một bộ chọn CSS cụ thể được chỉ định trong tham số của nó trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
document.querySelector(“CSS Selector”);
Ví dụ
Hãy để chúng tôi xem một ví dụ về phương thức querySelector () -
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM querySelector() Method Demo</h1>
<p class="awesome-para">Hi! I'm a paragraph with some random text.</p>
<button onclick="changeColor()" class="btn">Change p styles</button>
<script>
function changeColor() {
var paraElement = document.querySelector(".awesome-para");
paraElement.style.color="#db133a";
paraElement.style.fontSize="1.2rem";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ xanh lam ”Để thay đổi kiểu của phần tử para.
