Hướng dẫn javascript đổi màu background
Hướng dẫnĐể làm bài này thì chúng ta thực hiện các bước như sau: Bài viết này được đăng tại [free tuts .net] Bước 1: Lấy các đối tượng HTML Code // Lấy 2 button và thẻ div var button1 = document.getElementById("btn1"); var button2 = document.getElementById("btn2"); var div = document.getElementById('content'); Bước 2: Thay đổi thuộc tính CSS Ta sử dụng thuộc tính Code // Thiết lập click cho button 1 button1.onclick = function () { div.style.background = "red"; }; // Thiết lập click cho button 2 button2.onclick = function () { div.style.background = "blue"; }; Toàn bộ chương trìnhSau đây là toàn bộ chương trình code của bài này.
Từ ví dụ này ta thấy để thay đổi style CSS cho thẻ HTML thì ta sử dụng cú pháp Danh sách file tải về
Bài viết được sự cho phép của tác giả Trần Anh Tuấn Hello xin chào các bạn, lâu lắm rồi mình chưa viết bài mới cho blog, vì lâu nay mình đang suy nghĩ tìm chủ đề mới để viết cho blog để giúp các bạn học hỏi, cải thiện trình độ và hôm nay mình đã tìm ra một chuyên mục mới cho blog của mình đó chính là Javascript thực chiến nghĩa là thay vì viết những bài về kiến thức cơ bản thì mình sẽ làm các bài như là hướng dẫn code chức năng tab, autocomplete, scroll fixed, toggle menu, slider… Là những vấn đề khi đi làm mà các bạn sẽ hay gặp phải, làm sao để phân tích vấn đề, đưa ra giải pháp và để code nó thì series này mình sẽ cố gắng chia sẻ nhiều cho các bạn luôn. Và bài đầu tiên của series này chính là hướng dẫn code chức năng đổi màu nền ngẫu nhiên trước nhé. Đề bàiCho một danh sách màu sắc bất kỳ, khi nhấn vào một nút button ở ngoài giao diện thì màu nền của trang web sẽ đổi ngẫu nhiên(random) trong danh sách màu sắc đã cho từ trước. Giao diện HTML CSSVề giao diện thì chúng ta chỉ cần tạo HTML đơn giản mà thôi với một button có class
Và ta sẽ có kết quả đơn giản như này: Việc đầu tiên chúng ta cần làm đó chính là khai báo các biến cần sử dụng, ở đây mình đặt một biến có tên là
Tiếp đến mình khai báo thêm 1 biến để chứa cái
Phần khai báo đã xong, bây giờ chúng ta sẽ thêm sự kiện nhấn vào nút button này bằng phương thức Để lấy giá trị trong mảng thì chúng ta sẽ truy xuất đến vị trí index của phần tử trong mảng ví dụ Tuy nhiên con số khi ra đôi khi sẽ là 7,2 mà trong mảng nếu để colors[7,2] thì sẽ không đúng cho nên
chúng ta cần làm tròn nó xuống bằng cách thêm một hàm khác bọc lại giá trị ở trên chính là Math.floor() sẽ làm tròn xuống ví dụ 7,2 sẽ thành 7, lúc này trở đi ta có thể dùng một biến có tên là
Sau khi lấy được mã màu rồi thì việc tiếp theo đơn giản chỉ cần thay đổi cho thẻ
Như vậy là xong một chức năng đổi màu đơn giản rồi, ở dưới đây là tổng hợp code Javascript từ nãy đến giờ nhé
Tạm kếtQua bài viết này, mình hi vọng sẽ giúp ích được cho các bạn phần nào trong việc học tập và thực hành với Javascript nhé, cũng như học thêm được cách phân tích vấn đề, các bước để làm ra kết quả như mong muốn, học cách lấy giá trị ngẫu nhiên trong một mảng với các hàm Math, ôn lại sự kiện click, gán giá trị vào style của DOM… Cuối cùng mình chúc các bạn một ngày an lành và vui vẻ. Nếu bài viết mình có gì sai thì các bạn góp ý giúp mình nhé. Bài viết gốc được đăng tải tại evondev.com Có thể bạn quan tâm:
Xem thêm các việc làm JavaScript hấp dẫn tại TopDev |