JavaScript có thể thêm kiểu CSS vào phần tử một cách động. Có 2 cách khác nhau để bạn có thể tạo kiểu cho phần tử: thêm trực tiếp thuộc tính CSS hoặc sửa đổi các lớp

Bạn đang xem: thêm kiểu vào phần tử js

THÊM PHONG CÁCH CHO PHẦN TỬ SỬ DỤNG JAVASCRIPT

Một trong nhiều cách sử dụng javascript là trong tạo kiểu tài liệu HTML . Javascript có thể thêm hoặc xóa các thuộc tính CSS cho bất kỳ phần tử nào trực tiếp hoặc bằng cách kích hoạt một số sự kiện.

Sử dụng javascript, bạn có thể đặt hầu hết các thuộc tính CSS cho các phần tử như màu sắc, nền, đường viền, hoạt ảnh, kiểu phông chữ, căn chỉnh văn bản, chiều rộng, chiều cao, phần đệm, vị trí, v.v.

Bạn có thể sử dụng javascript để đặt trực tiếp kiểu trên một phần tử và bạn cũng có thể sử dụng javascript để thêm hoặc xóa các lớp khỏi phần tử sẽ thêm hoặc xóa một tập hợp kiểu CSS cho phần tử.

Lưu ý: CSS phải luôn được ưu tiên cho kiểu của phần tử . Chỉ trong trường hợp cần một số thao tác động, chúng tôi có thể sử dụng javascript.

Trong hướng dẫn này, bạn sẽ học cách quản lý kiểu của một phần tử bằng javascript.

Cách tạo kiểu cho các phần tử bằng Javascript?

Như chúng ta đã thấy ở trên, có 2 cách tiếp cận khác nhau để thay đổi kiểu của một phần tử bằng cách sử dụng javascript.

Hãy xem xét cả hai cách này một cách chi tiết.

1. Kiểu bộ JavaScript

Mọi phần tử trong DOM đều có đối tượng kiểu .

Đối tượng kiểu này cũng là một trong những thuộc tính của phần tử. Thuộc tính style trả về đối tượng CSSStyleDec Tuyên bố , đại diện cho thuộc tính style của một phần tử.

Thuộc tính phong cách của một phần tử

Bạn có thể thấy từ hình trên, đối tượng style cung cấp tất cả các thuộc tính CSS mà bạn có thể lấy hoặc thiết lập bằng cách sử dụng đối tượng này.

Để thay đổi kiểu của một phần tử:

  1. Chọn phần tử, ví dụ – bằng cách sử dụng getElementById
  2. Sử dụng thuộc tính

    style

    cho phần tử

  3. Sau đó, nối thuộc tính CSS với thuộc tính đó và gán giá trị CSS dưới dạng một chuỗi.

Cú pháp:

 document. 

getElementById

("id1"). style.

css_property

=

" value "

;

Hãy thay đổi màu của phần tử bằng “id1” trong ví dụ bên dưới.

  const element = document.getElementById ("id1");
element.style.color = "red";  

▶ Chạy mã

Trong ví dụ trên, bạn đặt kiểu mới cho đoạn văn trực tiếp bằng javascript, nhưng bạn cũng có thể đặt kiểu mới cho bất kỳ phần tử nào khi một sự kiện được kích hoạt. Các sự kiện có thể là bất cứ điều gì như tải trang, nhấp vào nút, di chuyển chuột, cuộn trang, v.v.

Hãy xem một ví dụ sử dụng sự kiện nhấp chuột để thay đổi màu của đoạn văn.

  const element = document.getElementById ("id1");
function changeColor (màu) {
  element.style.color = color;
}  

▶ Chạy mã

Thay đổi thuộc tính CSS có dấu gạch ngang

Có nhiều thuộc tính CSS có dấu gạch ngang trong tên của nó, ví dụ background-color , border-radius , margin-top , vv và javascript chỉ đơn giản là không chấp nhận gạch nối trong tên biến, tên hàm hoặc trong tên thuộc tính

Bây giờ, giả sử bạn muốn đặt background-color bằng javascript, thì bạn phải làm gì?

Để chỉ định thuộc tính CSS như vậy, chỉ cần xóa dấu gạch nối khỏi tên thuộc tính và chuyển đổi thuộc tính sang dạng camelcase. Ví dụ ‘background-color’ = & gt; backgroundColor

Đây là danh sách thuộc tính CSS có dấu gạch nối và cách sử dụng thuộc tính này trong javascript.

Tên thuộc tính trong CSS
Đến
trong Javascript

màu nền
= & gt;
màu nền

hình nền
= & gt;
hình nền

đường viền dưới cùng
= & gt;
borderBottom

biên giới
= & gt;
borderTop

bóng hộp
= & gt;
hộp

cỡ chữ
= & gt;
cỡ chữ

font-family
= & gt;
fontFamily

chiều cao giữa các dòng
= & gt;
chiều cao giữa các dòng

và như thế…

Hãy xem một số ví dụ.

  const body = document.body;
body.style.backgroundColor = "teal";  

▶ Chạy mã

Thêm thuộc tính đường viền vào phần tử

  const element = document.getElementById ("para");
element.style.border = "3px";
element.style.borderStyle = "Solid";
element.style.borderColor = "blue";  

▶ Chạy mã

 Ezoic

báo cáo quảng cáo này

Trường hợp đặc biệt : Thuộc tính CSS float được sử dụng làm cssFloat khi sử dụng với javascript vì từ float là từ dành riêng trong javascript.

2. Javascript Thêm lớp vào phần tử

Một cách khác để thêm hoặc xóa kiểu CSS khỏi phần tử là thêm và xóa lớp CSS khỏi phần tử.

Trong JavaScript, chúng ta có các thuộc tính className classList để xử lý các lớp.

  • className : Nó trả về tất cả các lớp có trong phần tử ở dạng chuỗi
  • classList : Nó trả về DOMTokenList , chứa nhiều phương thức khác nhau để xử lý các lớp trong một phần tử

Bạn cũng có thể thêm hoặc xóa các lớp bằng cách sử dụng thuộc tính className nhưng bạn phải thực hiện nhiều thao tác phức tạp với chuỗi trả về, đây không phải là cách thú vị để xử lý các lớp.

Tuy nhiên, thuộc tính classList đi kèm với nhiều phương thức để xử lý các lớp. Dưới đây là một số phương pháp để sửa đổi các lớp:

Tôi. thêm lớp trong javascript

Để thêm giá trị lớp vào một phần tử, hãy sử dụng phương thức add trên một phần tử thông qua thuộc tính classList của phần tử đó.

Bạn có thể thêm một hoặc nhiều lớp vào phần tử cùng một lúc. Để thêm nhiều lớp, hãy cung cấp tên lớp trong phương thức add được phân tách bằng dấu phẩy.

Thêm một lớp duy nhất vào phần tử.

  element.classList.add ('size');  

Thêm nhiều lớp vào phần tử.

  element.classList.add ('padding', 'color');  

Đây là một ví dụ hoạt động:

  const element = document.querySelector ('p');

function addSize () {
  element.classList.add ('size');
}
function addPaddingAndColor () {
  element.classList.add ('padding', 'color');
}  

▶ Chạy mã

II. chuyển đổi lớp trong javascript

Phương thức toggle của thuộc tính classList chuyển đổi một giá trị lớp khỏi phần tử có nghĩa là nếu lớp có trong phần tử thì nó sẽ loại bỏ lớp và nếu lớp không có hiện diện trong phần tử sau đó nó thêm lớp vào phần tử.

Dưới đây là ví dụ về chế độ tối và trắng bằng cách sử dụng phương pháp bật tắt.

 const element = document.querySelector ('body');

function toggleClass () {
  element.classList.toggle ('tối');
}  

▶ Chạy mã

III. loại bỏ lớp trong javascript

Để xóa một lớp khỏi một phần tử, hãy sử dụng phương thức remove của thuộc tính classList .

Bạn có thể xóa một hoặc nhiều lớp cùng một lúc khỏi phần tử.

Xóa một lớp:

  element.classList.remove ('size');  

Xóa nhiều lớp:

  element.classList.remove ('padding', 'color');  

Đây là một ví dụ hoạt động:

  const element = document.querySelector ('p');

function removeSize () {
  element.classList.remove ('size');
}
function removePaddingAndColor () {
  element.classList.remove ('padding', 'color');
}  

▶ Chạy mã

IV. thay thế lớp trong javascript

Để thay thế một lớp bằng một lớp khác trong một phần tử, hãy sử dụng phương thức Replace () với API classList .

Phương thức Replace nhận hai đối số, đối số đầu tiên là lớp cũ và đối số thứ hai là lớp mới.

Thay thế một lớp bằng một lớp khác:

  element.classList.replace ('blue', 'red');  

Đây là một ví dụ hoạt động:

  const element = document.querySelector ('p');

function red () {
  element.classList.replace ('blue', 'red');
}
function blue () {
  element.classList.replace ('red', 'blue');
}  

▶ Chạy mã

Tạo hoạt ảnh bằng Javascript

Sử dụng các thuộc tính kiểu javascript ở trên, chúng tôi có thể tạo hoạt ảnh thú vị. Với những giới hạn duy nhất này trong việc tạo hoạt ảnh là trí tưởng tượng của chúng ta.

Hãy tạo một hoạt ảnh đơn giản về một quả bóng đang chuyển động.

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;

& lt; đầu & gt;
  & lt; title & gt; Javascript - DOM Animation Ball & lt; / title & gt;
  & lt; phong cách & gt;
    .thùng đựng hàng {
      chiều rộng: 600px;
      chiều cao: 200px;
      màu nền: xanh lam thép;
      viền: màu xám đặc 2px;
      chức vụ: thân nhân;
    }

    .trái bóng {
      màu nền: cà chua;
      chiều rộng: 50px;
      chiều cao: 50px;
      border: 1px solid sienna;
      vị trí: tuyệt đối;
      bán kính biên giới: 50%;
      lề: 0;
    }
  & lt; / style & gt;
& lt; / head & gt;

& lt; body & gt;
  & lt; h2 & gt; Tạo Quả bóng di chuyển bằng javascript. & lt; / h2 & gt;

  & lt; div class = "container" & gt;
    & lt; p class = "ball" & gt; & lt; / p & gt;
  & lt; / div & gt;
  & lt; nút onclick = "jump ()" & gt; Nhảy & lt; / nút & gt;
  & lt; script & gt;
    hàm jump () {
      setInterval (go, 10);
    }
    var ball = document.querySelector ('. ball');
    var xStart = 0;
    var yStart = 0;
    var xEnd = 150;
    var yEnd = 550;
    hàm go () {
      if (xStart & lt; xEnd)
        xStart ++;
      khác
        xStart = 0;
      if (yStart & lt; yEnd)
        yStart ++;
      khác
        xStart = 0;

      ball.style.top = xStart + "px";
      ball.style.left = yStart + "px";
    }
  & lt; / script & gt;
& lt; / body & gt;

& lt; / html & gt;  

▶ Chạy mã


Xem thêm những thông tin liên quan đến chủ đề thêm kiểu vào phần tử js

JavaScript 21: Sắp xếp các phần tử của mảng

alt

  • Tác giả: thân triệu
  • Ngày đăng: 2019-05-25
  • Đánh giá: 4 ⭐ ( 9142 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn học lập trình JavaScript cơ bản. Học javascript cho tất cả mọi người. Học javascript đơn giản và miễn phí. Sắp xếp các phần tử mảng trong javascript. thân triệu channel-let’s grow together!

    Link code mẫu: https://github.com/thantrieu/JavaScript/blob/master/bai21.html

    code mẫu:

Thay đổi động thuộc tính kiểu phần tử bằng JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 6265 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nó gần như chính xác. Vì -là một toán tử javascript, bạn thực sự không thể…

Javascript Array Push: Cách thêm phần tử vào Array S :: Eloquent Javascript

  • Tác giả: gialaipc.com.vn
  • Đánh giá: 3 ⭐ ( 1044 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [ad_1]

    Mảng là danh sách các đối tượng có nguyên mẫu có các phương thức để thực hiện các thao tác đột biến. Độ

Xử Lý Dữ Liệu JSON Đơn Giản Với Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 3490 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON – Javascript Object Notation, là bộ quy tắc về cách trình bày và mô tả dữ liệu trong một chuỗi lớn thống nhất được gọi chung là chuỗi JSON.

Thêm / Xóa phần tử thông qua JS DOM

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 8057 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu cách thao tác thêm / Xóa các phần tử trong JavaScript. (Hay còn gọi là thao tác với DOM)

Map và Set trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 8268 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Map và Set là các kiểu cấu truc dữ liệu xuất hiện trong phiên bản ES6. Bài viết này sẽ giải thích, trình bày một số use-case thực tế và lí do Map và Set sẽ có ích hơn Array và Object trong JavaScript.

Các Phương Thức Array Javascript

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 1833 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay bạn hãy cùng mình đi vào tìm hiểu cách sử dụng các phương thức với kiểu dữ liệu array (mảng) trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Mảng chuỗi trong Java - chuỗi java trong mảng

By ads_php