Thuộc tính kích thước chọn HTML DOM trả về và sửa đổi giá trị của thuộc tính kích thước của danh sách thả xuống.
Cú pháp
Sau đây là cú pháp -
-
Kích thước trả lại
object.size
-
Đang sửa đổi giá trị
object.size = “number”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính kích thước chọn HTML DOM -
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
.drop-down{
display:block;
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:2px;
margin:1rem auto;
outline:none;
}
.btn{
background:orange;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
font-weight:bold;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Select size property Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
<option>Economics</option>
<option>Hindi</option>
<option>Biology</option>
</select>
<button type="button" onclick="changeSize()" class="btn">Change Size</button>
<div class="show"></div>
<script>
function changeSize() {
var dropDown = document.querySelector(".drop-down");
document.querySelector(".show").innerHTML="Size changed";
dropDown.size="3";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi kích thước ”Để thay đổi kích thước của danh sách thả xuống.
