HomeLập trìnhJavaScriptTìm hiểu cách...

Tìm hiểu cách thao tác CSS bằng JavaScript bằng cách mã hóa khung ảnh động


Thao tác DOM có thể được định nghĩa đơn giản là thao tác với tài liệu (hoặc trang) HTML bằng JavaScript.

DOM là viết tắt của Mô hình đối tượng tài liệu mà bạn có thể hình dung dưới dạng cấu trúc dạng cây được tạo thành từ các phần tử HTML khác nhau.

Việc trực quan hóa tài liệu HTML giống như một cái cây giúp dễ dàng truy cập các phần tử của nó và có khả năng thay đổi chúng. JavaScript giúp chúng ta làm điều này.

DOM được hình dung dưới dạng cây.
DOM được hình dung dưới dạng cây

Giờ đây, JavaScript là một ngôn ngữ mạnh mẽ, do đó, chúng ta không chỉ có thể thao tác các thành phần HTML với nó mà còn có thể sử dụng nó để thao tác các thuộc tính CSS của bất kỳ trang web nào.

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách điều khiển kiểu dáng của trang web bằng cách xây dựng một dự án đơn giản.

Trong dự án này, chúng tôi sẽ mã hóa khung ảnh bằng HTML và CSS, sau đó chúng tôi sẽ sử dụng JavaScript để làm cho khung ảnh động. Nghe có vẻ vui? Hãy bắt đầu nào!

Cách tạo tệp HTML

Tạo một thư mục cho dự án này và đặt tên cho nó bất cứ điều gì bạn muốn. Sau đó điều hướng đến thư mục trong trình chỉnh sửa mã yêu thích của bạn và tạo một tệp HTML mới. tôi đặt tên cho tôi box.htmlnhưng bạn có thể đặt tên của bạn bất cứ điều gì bạn thích.

Tiếp theo, tạo bản soạn sẵn HTML5 bằng cách nhấn dấu chấm than và nhấn phím enter.

Trong thẻ body, tạo thẻ h1 và nhập tiêu đề của dự án này vào đó. Trong trường hợp của tôi, tôi đã làm điều này:

<h1>CSS Picture Frame</h1>

Tiếp theo, tạo một div và tạo cho nó một lớp “đường viền” như thế này:

<div class = “border”></div>

Trong div này, tạo một div khác và đặt cho nó một lớp “phần đệm” như thế này:

<div class = “padding”></div>

Trong div “padding”, hãy tạo một div khác và cung cấp cho nó một lớp “nội dung” như sau:

<div class = “content”></div>

Bây giờ, div “nội dung” này là nơi chứa hình ảnh. Bạn có thể lựa chọn sử dụng hình ảnh hoặc biểu tượng cảm xúc. Tôi đã chọn sử dụng biểu tượng cảm xúc, vì vậy tôi đã làm như thế này:

Đọc thêm  Cách sử dụng Currying và Composition trong JavaScript

<div class = “content”>&#127856;</div>

Cho đến nay, chúng tôi đã tạo ba div. Cùng nhau, chúng sẽ trông như thế này:

<div class="border">
   <div class="padding">
       <div class="content">
            &#127856;
                </div>
           </div>
       </div

Ngay bên dưới đoạn mã trên, tạo một div mới và đặt cho nó một Id là “đầu vào” như sau:

<div id = “inputs”></div>

Trong div “đầu vào” này, hãy tạo một div khác có Id là “thanh trượt”, bởi vì chúng tôi sẽ tạo thanh trượt bên trong chúng.

Để tạo một thanh trượt trong HTML, bạn chỉ cần làm như sau:

<input type="range" name="" id=""  min="10" max="100">

<input type = "range"> tạo đầu vào thanh trượt và minmax thuộc tính được sử dụng để chỉ định giá trị tối thiểu và tối đa mà thanh trượt có thể có. Trong trường hợp này, tối thiểu là 10 và tối đa là 100.

Đối với dự án này, chúng tôi cần 3 thanh trượt, một cho “đường viền”, một cho “phần đệm” và một cho “nội dung” tương ứng. Cung cấp cho mỗi thanh trượt một Id có ý nghĩa hoặc bạn có thể làm như tôi đã làm:

<div id="sliders">
<h3>Border: </h3>
<input type="range" name="" id="border-range"  min="10" max="100">
<h3>Padding: </h3>
<input type="range" name="" id="padding-range" min="10" max="100">
<h3>Content: </h3>
<input type="range" name="" id="content-range" min="10" max="100">
</div>

Bên dưới div “thanh trượt”, tạo một div mới và đặt cho nó một Id gồm “màu sắc”, như thế này:

<div id = “colors”></div>

bởi vì chúng tôi sẽ tạo bộ chọn màu trong div này. Bạn có thể tạo bộ chọn màu bằng cách thực hiện việc này:

<input type="color" name="" id="">

Chúng tôi cũng cần 3 bộ chọn màu cho dự án này, mỗi bộ chọn tương ứng cho div “đường viền”, “phần đệm” và “nội dung”. Vì vậy, hãy tiếp tục và tạo ba bộ chọn màu trong div “màu sắc”. Mã của bạn sẽ trông như thế này:

<div id="colors">
<h3>Border:</h3>
<input type="color" name="" id="border-color">
<h3>Padding</h3>
<input type="color" name="" id="padding-color">
<h3>Content</h3>
<input type="color" name="" id="content-color">
</div>

Khi bạn xem trang của mình trong trình duyệt, bạn sẽ nhận được kết quả như ảnh chụp màn hình bên dưới:

Ảnh chụp màn hình--9--1

Bước tiếp theo là liên kết các tệp CSS và JavaScript. Nếu chưa tạo, bạn nên tạo tệp CSS và JS và liên kết chúng với HTML của mình. Trong trường hợp của tôi, tôi đã tạo một box.css và một box.js tập tin. Đừng quên:

  • Liên kết tệp CSS của bạn trong thẻ đầu của HTML bằng mã sau: <link rel="stylesheet" href="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.css">
  • Liên kết tệp JS của bạn trong thẻ body ở cuối mã của bạn, ngay bên dưới div đóng cuối cùng và phía trên thẻ đóng body như sau: <script src="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.js"></script>

Nếu bạn đã làm điều này thành công, xin chúc mừng! Phần HTML của hướng dẫn này hiện đã hoàn tất. Đây là mã HTML đầy đủ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.css">
</head>
<body>
    <h1>CSS Picture Frame</h1>
        <div class="border">
            <div class="padding">
                <div class="content">
                    &#127856;
                </div>
            </div>
        </div>

        <div id="inputs">
        <div id="sliders">
            <h3>Border: </h3>
            <input type="range" name="" id="border-range"  min="10" max="100">
            <h3>Padding: </h3>
            <input type="range" name="" id="padding-range" min="10" max="100">
            <h3>Content: </h3>
            <input type="range" name="" id="content-range" min="10" max="100"> 
        </div>

            <div id="colors">
                <h3>Border:</h3>
                <input type="color" name="" id="border-color">
                <h3>Padding</h3>
                <input type="color" name="" id="padding-color">
                <h3>Content</h3>
                <input type="color" name="" id="content-color">
            </div>
        </div>
        <script src="https://www.freecodecamp.org/news/learn-how-to-manipulate-css-with-javascript-by-coding-a-dynamic-picture-frame/box.js"></script>
</body>
</html>

Cách tạo kiểu cho trang web bằng CSS

Mở tệp CSS bạn đã tạo và thêm đoạn mã sau:

body{
display: flex;
align-items: center;
justify-content: center;
background-color: aquamarine;
flex-direction: column;
}
.border{
background-color: #0b67c4;
padding: 45px;
}
.padding{
background-color: #42b3dd;
padding: 45px;
}
.content{
background-color: #299baf;
padding: 45px;
font-size: 78px;
}
#inputs{
display: flex;
flex-direction: row;
}
#sliders{
margin-right: 30px;
}

Ghi chú: Kiểu dáng này sẽ chỉ hoạt động nếu bạn đã sử dụng cùng Id và lớp mà tôi đã sử dụng trong HTML.

Đọc thêm  Cách sử dụng JavaScript Array.prototype.join() - JavaScript Join được giải thích bằng các ví dụ - Hướng dẫn

Bây giờ, chúng ta hãy chú ý đến .border, .padding.content phong cách. Bạn sẽ nhận thấy rằng ngoài .contenttất cả đều có hai quy tắc cụ thể là: background-colorpadding. Đây là hai quy tắc mà chúng ta sẽ thao tác với mã JavaScript của mình.

Bạn có nhớ các thanh trượt và bộ chọn màu mà chúng tôi đã tạo trong mã HTML của mình không? Chúng tôi sẽ sử dụng các thanh trượt để thao tác thuộc tính đệm của .border, .padding.content tương ứng. Và chúng tôi sẽ sử dụng bộ chọn màu để thay đổi background-color tài sản của mỗi div.

Khi bạn làm mới trình duyệt của mình, bạn sẽ có một cái gì đó tương tự như ảnh chụp màn hình bên dưới:

Ảnh chụp màn hình--2--1

Cách viết JavaScript

Mã JS cho dự án này có thể được chia thành ba phần. Đầu tiên, chúng tôi lấy Id của thanh trượt và bộ chọn màu và lưu trữ chúng trong các biến. Tiếp theo, chúng ta lấy các lớp của div “đường viền”, “phần đệm” và “nội dung” và cũng lưu trữ chúng trong các biến. Và cuối cùng, chúng tôi đính kèm trình xử lý sự kiện vào các biến.

Vì chúng tôi muốn thanh trượt thay đổi thuộc tính đệm của div và bộ chọn màu thay đổi màu nền của chúng, nên chúng tôi sử dụng trình lắng nghe sự kiện thay đổi để đạt được điều đó.

Bây giờ là lúc để viết mã. Đầu tiên, lấy Id của các thanh trượt như thế này và lưu trữ chúng trong các biến (ghi nhớ tên của Id được sử dụng trong mã HTML.):

let borderRange = document.getElementById("border-range")
let paddingRange = document.getElementById("padding-range")
let contentRange = document.getElementById("content-range")

Tiếp theo, lấy Id của bộ chọn màu và lưu trữ chúng trong các biến, đại loại như thế này:

let borderColor = document.getElementById("border-color")
let paddingColor = document.getElementById("padding-color")
let contentColor = document.getElementById("content-color")

Bây giờ hãy lấy các lớp của div đường viền, phần đệm và nội dung bằng cách sử dụng querySelector như thế này:

let borderBox = document.querySelector(".border")
let paddingBox = document.querySelector(".padding")
let contentBox = document.querySelector(".content")

Bước tiếp theo sau đó là đính kèm trình xử lý sự kiện vào từng thanh trượt và bộ chọn màu. Để làm cho thanh trượt đầu tiên thay đổi thuộc tính đệm CSS của div viền, chúng ta chỉ cần sử dụng đoạn mã sau:

borderRange.addEventListener("change", function(){
borderBox.style.padding = borderRange.value + "px"
})

Để tôi giải thích: Trình xử lý sự kiện thay đổi lắng nghe sự thay đổi trong thanh trượt. Mật mã borderBox.style.padding được sử dụng để nhắm mục tiêu thuộc tính đệm của borderBox.

Đọc thêm  Mối nối JavaScript – Cách sử dụng Phương thức mảng .splice() JS

borderRange.value nhận giá trị của thanh trượt và +  “px” thêm px vào bất kể giá trị này là gì. đánh đồng borderBox.style.padding đến borderRange.value + “px” là một cách yêu cầu mã của chúng tôi thay đổi thuộc tính đệm của borderBox thành bất kỳ giá trị nào mà borderRange nhập vào bằng pixel bất cứ khi nào chúng tôi di chuyển thanh trượt (nghĩa là sự kiện thay đổi được kích hoạt).

Làm tương tự cho phần đệm và div nội dung như thế này:

paddingRange.addEventListener("change", function(){
paddingBox.style.padding = paddingRange.value + "px"
})
contentRange.addEventListener("change", function(){
contentBox.style.padding = contentRange.value + "px"
})

Sau khi thực hiện việc này, hãy đính kèm trình xử lý sự kiện vào bộ chọn màu bằng cách sử dụng nguyên tắc tương tự – ngoại trừ, trong trường hợp này, các giá trị màu ở dạng thập lục phân, vì vậy chúng tôi không cần thêm bất kỳ đơn vị nào vào chúng.

Thay vì nhắm mục tiêu thuộc tính đệm, chúng tôi nhắm mục tiêu thuộc tính backgroundColor tài sản thay thế. (Lưu ý: cú pháp cho màu nền trong JS ở dạng lạc đà.)

Mã của bạn sẽ trông như thế này:

borderColor.addEventListener("change", function(){
borderBox.style.backgroundColor = borderColor.value
})
paddingColor.addEventListener("change", function(){
paddingBox.style.backgroundColor = paddingColor.value
})
contentColor.addEventListener("change", function(){
contentBox.style.backgroundColor = contentColor.value
})

Bây giờ, khi bạn làm mới trình duyệt của mình, bạn sẽ có thể thay đổi kích thước của các hộp và màu sắc của chúng bằng các thanh trượt và bộ chọn màu. Với mã này, bạn có thể tạo khung ảnh với các kích cỡ và màu sắc khác nhau.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status