Phương thức getElementsByClassName() style trong JavaScript
Phương thức getElementsByClassName() style trong JavaScript
Phương thức getElementsByClassName() style trong JavaScript
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html>
<html>
<head>
<title>Phương thức getElementsByClassName() style trong JavaScript</title>
</head>
<body>
<h1>Phương thức getElementsByClassName() style trong JavaScript</h1>
<p>Phương thức getElementsByClassName() trong JavaScript dùng để lấy các phần tử HTML có tên lớp giống nhau và cùng nằm trong một phần tử cha để thực hiện những hành động vào các phần tử HTML con đó theo những vị trí được chỉ định, ở ví dụ này mình lấy phần tử HTML có tên lớp cần tìm và những phần tử đó nằm trong một phần tử cha khác , thêm thuộc tính style vào phần tử đó với một vị trí được chỉ định:</p>
<ul id="ulid">
<li class="liclass">Home</li>
<li class="liclass">Giới thiệu</li>
<li class="liclass">Hosting</li>
<li class="liclass">Blog</li>
<li class="liclass">Liên hệ</li>
</ul>
<p>Click vào nút THÊM STYLE để thêm style vào li có class liclass ở vị trí 1</p>
<button onclick="themStyle()">THÊM STYLE</button>
<script>
function themStyle() {
// Lấy id của ul
const list = document.getElementById("ulid");
// Lấy phần tử có tên lớp liclass ở vị trí 1, thêm style, thẻ li nằm trong ul có id là ulid
list.getElementsByClassName("liclass")[1].style = "color:red";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức getElementsByClassName() style trong JavaScript</title>
</head>
<body>
<h1>Phương thức getElementsByClassName() style trong JavaScript</h1>
<p>Phương thức getElementsByClassName() trong JavaScript dùng để lấy các phần tử HTML có tên lớp giống nhau và cùng nằm trong một phần tử cha để thực hiện những hành động vào các phần tử HTML con đó theo những vị trí được chỉ định, ở ví dụ này mình lấy phần tử HTML có tên lớp cần tìm và những phần tử đó nằm trong một phần tử cha khác , thêm thuộc tính style vào phần tử đó với một vị trí được chỉ định:</p>
<ul id="ulid">
<li class="liclass">Home</li>
<li class="liclass">Giới thiệu</li>
<li class="liclass">Hosting</li>
<li class="liclass">Blog</li>
<li class="liclass">Liên hệ</li>
</ul>
<p>Click vào nút THÊM STYLE để thêm style vào li có class liclass ở vị trí 1</p>
<button onclick="themStyle()">THÊM STYLE</button>
<script>
function themStyle() {
// Lấy id của ul
const list = document.getElementById("ulid");
// Lấy phần tử có tên lớp liclass ở vị trí 1, thêm style, thẻ li nằm trong ul có id là ulid
list.getElementsByClassName("liclass")[1].style = "color:red";
}
</script>
</body>
</html>
Phương thức getElementsByClassName() style trong JavaScript nằm trong bài viết Phương thức getElementsByClassName() trong JavaScript