Làm thế nào để thay đổi CSS bằng JavaScript? [Hướng dẫn] – làm thế nào để thay đổi css

Tìm hiểu cách thay đổi kiểu CSS cho trang của bạn – Cách tiếp cận đầu tiên để thay đổi CSS bằng JavaScript sẽ là tận dụng kiểu nội tuyến.

Bạn đang xem : cách thay đổi css

Trang tính kiểu xếp tầng (CSS) được sử dụng để thiết kế bố cục của trang web. CSS là một tập hợp các quy tắc có cấu trúc mô tả cách bố trí của các phần tử trong tài liệu HTML.

Có ba cách CSS có thể được áp dụng cho tài liệu HTML:

  1. Nội tuyến – sử dụng thuộc tính

    style

    bên trong các phần tử HTML;

  2. Nội bộ – sử dụng phần tử

    & lt; style & gt;

    trong & lt; head & gt;

  3. Bên ngoài – sử dụng phần tử

    & lt; liên kết & gt;

    liên kết đến tệp CSS bên ngoài

Tất cả ba cách tiếp cận được khám phá bên dưới. Mỗi cách tiếp cận đều có ưu điểm và nhược điểm, nhưng chúng ta sẽ khám phá chúng trong một bài viết khác.

Cần có hai điều để thực hiện thay đổi CSS :

  1. Sự kiện để kích hoạt thay đổi – Đây có thể là sự kiện DOM hoặc sự kiện JavaScript như trong trường hợp của setTimeout () . Điều này cũng có thể được thực hiện với CSS pseudo-class – thêm thông tin về các lớp này bên dưới.
  2. Một chức năng chịu trách nhiệm thực hiện thay đổi – Chức năng này có thể thay đổi hầu hết các phần tử kiểu CSS, ngoại trừ bộ chọn CSS.

Thay đổi CSS bằng cách sử dụng kiểu nội tuyến

Cách tiếp cận đầu tiên để thay đổi CSS bằng JavaScript sẽ là tận dụng kiểu nội tuyến. Lấy ví dụ sau:

JavaScript

 function changeColor (event) {
  const el = event.target;
  el.setAttribute ('style', 'color: blue');
}

HTML

 & lt; h2 class = "h2colored" style = "color: red" onclick = "changeColor (sự kiện)" & gt;
  Nhấp để thay đổi màu sắc
& lt; / h2 & gt; 

CSS

. h2colored {
  con trỏ: con trỏ;
}

Đoạn mã này xác định một phần tử tiêu đề (& lt; h2 & gt;), một sự kiện onclick và một kiểu – con trỏ: con trỏ. Kiểu con trỏ: con trỏ sửa đổi cách hiển thị của con trỏ chuột, được sử dụng để hiển thị vị trí hiện tại của chuột trên màn hình. Đặt kiểu thành con trỏ khiến con trỏ thay đổi giao diện, khiến con trỏ trông giống như một bàn tay. Điều này có thể giúp người dùng hiểu rằng có thể tương tác với một phần tử cụ thể bằng cách nhấp vào liên kết chẳng hạn.

Lưu ý: Kiểu này không cần thiết để mã hoạt động . Phần tử HTML không cần phải có một lớp rõ ràng được xác định để JavaScript sửa đổi nội dung của nó.

Khám phá ví dụ chi tiết hơn:

Sự kiện DOM kích hoạt là onclick, được xác định bên trong & lt; h2 & gt; yếu tố. Sự kiện này được xử lý bởi hàm changeColor ().

Hàm changeColor () nhận sự kiện DOM dưới dạng tham số, giúp dễ dàng thao tác trên thẻ cụ thể đã được nhấp.

Hàm khai báo biến để giữ phần tử – el – và gán giá trị event.target cho nó. Điều này đặt & lt; h2 & gt; là đối tượng hoạt động đang được sửa đổi. Tiếp theo, hàm áp dụng setAttribute () để đặt lại thuộc tính style của phần tử. Nếu thuộc tính style chưa được xác định trước đó, setAttribute chỉ cần thêm nó vào phần tử sau khi hoàn thành quá trình thực thi.

Sau khi trình xử lý sự kiện nhấp chuột hoàn tất, & lt; h2 & gt; thẻ sẽ có màu xanh lam cho màu của nó, thay vì giá trị màu đỏ đã có. Điều này sẽ hiển thị khi sử dụng các công cụ phát triển của trình duyệt, với các thay đổi vẫn tiếp diễn đối với phần tử sau khi hoàn thành.

Lưu ý: CSS nội tuyến là cách cụ thể nhất để áp dụng kiểu cho một phần tử và do đó phương pháp này được ưu tiên hơn hai tùy chọn sửa đổi CSS khác. Do đó, CSS nội tuyến ghi đè hầu hết các khai báo CSS khác.

Thay đổi CSS bằng cách sử dụng kiểu nội bộ

Phương pháp tiếp theo để thay đổi CSS bằng JavaScript sử dụng kiểu nội bộ. Lấy mã mẫu sau:

JavaScript

 function largeFont () {
  const dStyle = document.querySelector ('style');
  dStyle.innerHTML = 'p {font-size: 2rem;}';
}

Mã này sửa đổi kiểu của tất cả & lt; p & gt; các phần tử trong tài liệu, khiến chúng có phông chữ lớn.

Phương pháp này phụ thuộc vào việc xác định phần tử kiểu trong & lt; head & gt; của tài liệu HTML; yếu tố. Nếu phần tử style không có trong tài liệu HTML gốc, hàm này sẽ không hoạt động và const dStyle sẽ trả về giá trị rỗng. Bạn có thể giải quyết vấn đề này bằng cách tạo phần tử bắt buộc trong chính hàm, trước khi cố gắng thao tác kiểu. Dưới đây là một ví dụ về HTML được định dạng đúng, có phần tử kiểu:

HTML

 & lt; head & gt;
  & lt; meta charset = "UTF-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
  & lt; title & gt; Tài liệu & lt; / title & gt;
  & lt; phong cách & gt;
    P {
      kích thước phông chữ: 1.2rem;
    }
  & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
  & lt; p & gt;
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Bài tập, culpa. Voluptatem
  & lt; / p & gt;
  & lt; nút onclick = "largeFont ()" & gt; A + & lt; / nút & gt;
& lt; / body & gt;

Dấu xuống ở trên có thể được sử dụng với hàm mẫu được cung cấp ở trên để thao tác CSS mà tài liệu sử dụng. Có ba yếu tố quan trọng cần lưu ý:

Trong & lt; head & gt; phần tử:

Trong phần tử head, & lt; style & gt; thẻ đặt kích thước phông chữ cho tất cả & lt; p & gt; các phần tử trong tài liệu đến 1.2rem.

Trong & lt; body & gt; phần tử:

Trong phần tử body, chúng ta xác định một nút. Trình xử lý sự kiện onclick cho nút này là hàm LargeFont () được cung cấp ở trên.

Tập lệnh hàm:

Hàm xử lý nhấp chuột định vị phần tử kiểu, sau đó thay đổi chính HTML bằng cách sử dụng lệnh innerHTML .

Thay đổi CSS bằng cách sử dụng kiểu bên ngoài

Cách cuối cùng để triển khai các thay đổi CSS là sử dụng kiểu bên ngoài. JavaScript ví dụ sau được sử dụng để làm điều này:

JavaScript

 function changeClass (el) {
  el.classList.add ('yellowBgc');
}

Ví dụ trên nắm bắt phần tử để sửa đổi theo cách khác với những gì chúng ta đã thấy cho đến nay. Các ví dụ đầu tiên đã sử dụng đối tượng sự kiện để nắm bắt phần tử được tạo kiểu. Ở đây, tham số được truyền vào hàm changeClass () là cái này. Con trỏ this trong trường hợp này là chính phần tử – hiện tại là & lt; p & gt; yếu tố. Xem định nghĩa HTML của trình xử lý này bên dưới để biết thêm chi tiết.

Mã này sửa đổi danh sách lớp của phần tử. Bằng cách sử dụng classList.add () , nó sẽ thêm một lớp vào phần tử đó – trong trường hợp này, lớp yellowBgc đã được thêm vào & lt; p & gt; yếu tố. Giá trị lớp này sau đó có thể được triển khai trong tệp CSS bên ngoài.

Tiếp theo, chúng tôi sẽ thực hiện một số sửa đổi cơ bản đối với tài liệu HTML để kết hợp kiểu bên ngoài giữ định nghĩa của lớp yellowBgc.

Để liên kết tài liệu CSS bên ngoài với HTML của bạn, hãy thêm phần tử sau vào & lt; head & gt ;:

trên trang của bạn

HTML

 & lt; link rel = "stylesheet" href = "/ style / style.css" & gt; 

Điều này bao gồm biểu định kiểu /style/style.css trong tài liệu. Bạn có thể thay đổi vị trí được chỉ định trong thuộc tính href để trỏ đến bất kỳ vị trí tệp nào cần thiết. Nội dung của style.css là bên dưới:

CSS

. yellowBgc {
  background-color: màu vàng;
}

Lớp yellowBgc ở trên, khi được áp dụng cho một phần tử HTML, sẽ đặt màu nền thành màu vàng.

Chúng tôi liên kết chức năng với HTML sau, trong & lt; body & gt; của tài liệu:

HTML

 & lt; body & gt;
  & lt; p class = "lorem" onclick = "changeClass (this)" & gt;
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Bài tập, culpa. Voluptatem.
  & lt; / p & gt;
& lt; / body & gt; 

Mã này xác định một phần tử – & lt; p & gt ;, có trình xử lý sự kiện onclick. Trình xử lý sự kiện này chỉ vào hàm của chúng ta ở trên và, về mặt quan trọng, chuyển nó vào con trỏ this làm đối số duy nhất của nó. Sử dụng con trỏ này cho phép chúng tôi tham chiếu trực tiếp đến phần tử trong mã trình xử lý của chúng tôi, thay vì phải kéo phần tử khỏi mục tiêu sự kiện.

Thay đổi CSS bằng cách sử dụng CSS pseudo-class

Một số bộ chọn CSS trỏ đến một trạng thái hoạt động nhất định trên trang web (ví dụ: di chuột chỉ có hiệu lực khi con trỏ ở trên phần tử); hoặc xem xét trạng thái (ví dụ: đã truy cập chọn tất cả các liên kết đã truy cập). Có thể sử dụng các trạng thái này để thay đổi CSS của trang. Ví dụ:

CSS

. blueText: hover {
  màu sắc: xanh lam;
}

Kiểu trên được sử dụng bất cứ khi nào người dùng di con trỏ chuột qua phần tử có lớp blueText. Khi con trỏ ở trên phần tử, văn bản sẽ chuyển sang màu xanh lam theo định nghĩa kiểu. Khi con trỏ rời khỏi phần tử, màu sẽ trở lại giá trị ban đầu.

Các bài viết có liên quan:

JavaScript – Cách sử dụng setAttribute

JavaScript – Cách sử dụng setTimeout

JavaScript – Cách sử dụng onfocus


Xem thêm những thông tin liên quan đến chủ đề làm thế nào để thay đổi css

[Hướng dẫn guitar] Vài Câu Nói Có Khiến Người Thay Đổi – GREY D x TLINH | Tony Việt

  • Tác giả: Tony Việt
  • Ngày đăng: 2022-06-20
  • Đánh giá: 4 ⭐ ( 5429 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Hướng dẫn guitar] Vài Câu Nói Có Khiến Người Thay Đổi – GREY D x TLINH | Tony Việt
    Link video gốc: https://www.youtube.com/watch?v=2iidlwQ-NfU
    LIÊN HỆ MÌNH NẾU CÓ VẤN ĐỀ BẢN QUYỀN: dvviet@hce.edu.vn
    VaiCauNoiCoKhienNguoiThayDoi GreyD ​TonyViet
    ————————————***————————————–
    Em à! [Am7] Phía cơn gió bỗng lướt qua
    Cùng với bão [D9] tố cuốn đi bóng dáng thướt tha
    Về đâu em [Gmaj7] ơi vì sao em ơi mà tình ta thêm vơi?
    [E7] Giờ đây em ở đâu giữa mây trời?

    [Am7] Dưới góc phố mưa hắt hiu trùng theo không gian
    [D9] Khiến nỗi nhớ em thêm nhiều mình anh lang thang
    [Gmaj7] Tìm em nơi đâu đường dài trôi miên man
    Mà không [E7] thấy người về nơi đây

    [Am7] Có phải vì anh [D9] vẫn thường vô ý
    Chẳng suy [Gmaj7] nghĩ vài lần khiến em u [E7] sầu
    [Am7] Có phải vì anh [D9] trót vài câu nói
    Chạm vào [Gmaj7] nơi niềm đau mà người luôn chôn [E7] giấu?

    Vài câu [Am7] nói có khiến người thay [D9] đổi
    Có khiến bờ môi ấm [Gmaj7] êm nay chỉ còn trong nỗi [E7] nhớ
    Vài câu [Am7] nói kéo đến màu u [D9] tối
    Cuốn hết bình yên lúc [Gmaj7] xưa
    bên cạnh nhau [E7] mãi đi xa để mình ta trong căn [Am7] phòng…

    Ehh [D9] ehh Di di di di [Gmaj7] di
    Mãi đi xa để mình ta trong căn [Am7] phòng [D9] [Gmaj7] [E7]
    ———-***———–
    © Bản quyền thuộc về Tony Việt
    © Copyright by Tony Việt ☞ Do not Reup

Chuyển đổi CSS sang ZIP Trực tuyến. Nhanh chóng, An toàn & MIỄN PHÍ!

  • Tác giả: www.ezyzip.com
  • Đánh giá: 4 ⭐ ( 8302 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nén tệp CSS thành một kho lưu trữ ZIP trong trình duyệt của bạn. Không có giới hạn tệp (kích thước hoặc số lượng).

Làm thế nào để quản lý CSS đơn giản hơn

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 2812 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mọi chuyện không phải bàn nếu những dòng CSS của bạn chỉ vỏn vẹn 500 dòng hoặc ít hơn. Nhưng sẽ không bao giờ có điều đó xảy ra! Viết CSS chưa bao giờ là một công việc đơn giản. Một khi mà đoạn CSS ng…

Hover css: Xử lý thay đổi css khi di chuột vào một phần tử html

  • Tác giả: unitop.com.vn
  • Đánh giá: 5 ⭐ ( 3629 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

ToPhuongLoan.Com

  • Tác giả: tophuongloan.com
  • Đánh giá: 5 ⭐ ( 1455 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu

Important CSS là gì? Cách thay đổi thứ tự ưu tiên trong CSS?

  • Tác giả: arena.fpt.edu.vn
  • Đánh giá: 3 ⭐ ( 9468 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Important CSS là gì? Làm thế nào để thay đổi thứ tự ưu tiên trong CSS với important? Để giải đáp thắc mắc hãy cùng FPT Arena theo dõi bài viết dưới đây

Làm thế nào để thay đổi nickname trong phiên bản mới của CSS?

  • Tác giả: vi.atomiyme.com
  • Đánh giá: 5 ⭐ ( 1838 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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  Phương pháp trong Java - lớp phương thức trong java

By ads_php