Bạn đang xem : thêm css vào html javascript

Như tôi đã giải thích trong bài viết trước , một trong những lợi ích của JavaScript là nó có thể duyệt qua DOM một cách ngẫu nhiên , giúp một phần tử ở bất kỳ đâu trên trang web dễ dàng phản hồi với một lần nhấp trong một phần tử khác, không liên quan đến tài liệu. Sự xuất hiện của nội dung HTML vẫn nằm trong tầm ngắm của CSS , nghĩa là chúng tôi phải tích hợp các công nghệ với nhau để tạo ra một tổng thể gắn kết. Như chúng ta sẽ thấy trong các bài viết trong tương lai, điều này mở rộng sang việc sử dụng JavaScript để bắt đầu hoạt ảnh CSS trên nội dung HTML.

Thêm Thuộc tính CSS & amp; Giá trị cho một phần tử bằng JavaScript

Chúng tôi sẽ bắt đầu với một ví dụ đơn giản: giả sử chúng tôi muốn thêm đường viền trên một phần tử sau khi nhấp vào nút. Đánh dấu như sau:

  & lt; blockquote id = "ozymandius" & gt;
Tôi đã gặp một khách du lịch đến từ một vùng đất cổ…
& lt; / blockquote & gt;
& lt; nút & gt; Ozymandius & lt; / button & gt;  

Chúng tôi muốn nhấp vào nút để thay đổi màu của văn bản trong blockquote . Tôi đã tạo kiểu cho trang bằng CSS.

  blockquote # ozymandius {
background: # 000 url (ozymandius.jpg) không lặp lại trên cùng bên phải;
background-size: chứa;
đệm: 3rem 3rem 3rem 4rem;
màu: #fff;
font-family: Giấy cói, tưởng tượng;
bán kính đường viền: 5px;
lề: 0; font-size: 1.3rem;
text-shadow: 2px 2px 2px rgba (0,0,0,0.8);
}  

(Không được hiển thị: truy vấn @media để sửa đổi bản trình bày của blockquote ở kích thước màn hình nhỏ hơn và kỹ thuật CSS của tôi để làm mờ hình nền ).

Như tôi đã thảo luận, chúng ta không thể làm việc “ngược” thông qua DOM với CSS như hiện nay nó được viết: đó là vai trò của JavaScript. Chúng ta cũng không nên cố gắng viết nội tuyến JavaScript: sẽ hiệu quả hơn nhiều nếu gọi một hàm.

Xem Thêm  FFmpeg Codecs Documentation - sử dụng ffmpeg

  & lt; button onclick = "highlight ()" & gt;
Ozymandius
& lt; / nút & gt;  

Hàm sẽ được viết sớm hơn trong trang: tốt nhất là trong & lt; head & gt; của tài liệu, ngay sau biểu định kiểu được nhúng.

  function highlight () {
var ozy = document.querySelector ("# ozymandius");
ozy.style.color = "đỏ";
}  

Như bạn có thể thấy, việc thay đổi kiểu của một phần tử bằng JavaScript rất đơn giản: xác định phần tài liệu bạn muốn bằng document.querySelector hoặc một số phương pháp khác, thêm cả thuộc tính style css và đặt nó thành giá trị bạn muốn.

JavaScript Tương đương với CSS có thể khó hiểu

Nếu thuộc tính CSS bao gồm một từ duy nhất, thì tham chiếu JavaScript cũng giống như vậy. Mọi thứ trở nên phức tạp hơn nếu thuộc tính CSS chứa dấu gạch nối hoặc nhiều từ: tham chiếu JavaScript tương đương được nối và camelCased. Ví dụ:

Thuộc tính CSS Tham chiếu JavaScript tương đương
font-stylefontStyle
margin-bottommarginBottom
list-style-typelistStyleType

JavaScript CSS Ưu tiên

Thực hiện ý tưởng này thêm một bước nữa, chúng tôi sẽ thêm đường viền vào phần tử:

  function highlight () {
var ozy = document.querySelector ("# ozymandius");
ozy.style.border = "2px solid red";
}  

Lưu ý rằng kiểu do JavaScript áp đặt sẽ hợp nhất với CSS đã thiết lập của tài liệu: kiểu sử dụng JavaScript của chúng tôi tôn trọng thực tế là chúng tôi đặt border-radius trong biểu định kiểu được nhúng nhưng không có đường viền thực và kết hợp hai quy tắc trình bày với nhau.

Mọi thuộc tính CSS mà bạn biết đều có thể áp dụng sau .style . Mặc dù đây là phương pháp nhanh nhất và hiệu quả nhất trong JavaScript để thêm kiểu vào các phần tử từ góc độ hiệu suất của trình duyệt, nhưng việc viết một chuỗi các dòng mã .style có thể trở nên hơi quá sức khi bạn muốn thêm nhiều hơn một tài sản tại một thời điểm. Để giải quyết vấn đề này, bạn có một số lựa chọn.

Thêm quy tắc trình bày hàng loạt với cssText

Bạn có thể sử dụng cssText để thêm một khối CSS trong một lần:

Xem Thêm  8 Apache Spark Optimization Techniques - spark bang

  function highlight () {
var ozy = document.querySelector ("# ozymandius");
ozy.style.cssText = "border: 2px solid red; color: red;";
}  

(Tôi đã tham chiếu phần tử #ozymandius như một biến để đạt được nhiều chỗ hơn một chút trên mỗi dòng, không phải vì nó được yêu cầu bởi cssText ).

Lưu ý rằng CSS được JavaScript thêm vào một phần tử sẽ được ưu tiên hơn bất kỳ quy tắc CSS đã thiết lập nào:

  ozy.style.cssText = "border: 2px solid red; color: red; border-radius: 40px";  

Sau khi nhấp vào nút, phần tử & lt; blockquote & gt; sẽ có đường viền màu đỏ dày 2px với bán kính góc là 40 pixel và văn bản màu đỏ. Bạn có thể nghĩ về điều này theo cách giống hệt như các quy tắc CSS thông thường: một khai báo đến sau trong biểu định kiểu ảnh hưởng đến cùng một phần tử sẽ được ưu tiên hơn các quy tắc kiểu trước đó, tất cả những thứ khác đều bình đẳng.

Thêm lớp bằng JavaScript

Đối với các thay đổi CSS phức tạp, thường dễ dàng nhất là thêm CSS class đã có trong biểu định kiểu:

 . highlight {
viền: 2px màu đỏ đặc;
màu đỏ;
}  

Sau đó, thêm className vào tham chiếu phần tử:

  function highlight () {
var ozy = document.querySelector ("# ozymandius");
ozy.className = "highlight";
}  

Lưu ý rằng điều này sẽ thay thế bất kỳ lớp nào đã được áp dụng cho phần tử. Giống như hầu hết các tham chiếu JavaScript, className có thể được sử dụng để đọc và ghi vào DOM, vì vậy nếu bạn muốn giữ lại các lớp đã được áp dụng trước đó cho phần tử, bạn cần nối lớp mới với bất kỳ những cái:

  function highlight () {
var ozy = document.querySelector ("# ozymandius");
ozy.className = ozy.className + "highlight";
}  

(Lưu ý khoảng trắng trước từ tô sáng , cần thiết vì nhiều lớp áp dụng cho một phần tử được phân tách bằng dấu cách).

Bạn cũng có thể thêm, xóa và chuyển đổi các lớp bằng JavaScript bằng cách sử dụng classList mà tôi sẽ thảo luận trong bài viết tiếp theo .

Lưu ý: cũng có thể thêm toàn bộ biểu định kiểu động vào các trang web bằng JavaScript , điều này tôi đã đề cập trong một bài viết riêng. Mặc dù không bình thường, bạn cũng có thể đặt id của một phần tử bằng JavaScript để tận dụng lợi thế của các quy tắc CSS phù hợp.

Xem Thêm  JavaScript Splice - Cách sử dụng phương thức mảng JS .splice () - phương thức splice trong javascript là gì

Bạn có thích tác phẩm này không? Tôi mời bạn theo dõi tôi tại twitter.com/dudleystorey để tìm hiểu thêm.


Xem thêm những thông tin liên quan đến chủ đề thêm css vào html javascript

How to link CSS & JavaScript to HTML | Web Development Made Simple

  • Tác giả: TACV – The Amazing Code-Verse
  • Ngày đăng: 2019-10-27
  • Đánh giá: 4 ⭐ ( 8892 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: connect external css & javascript to html

    Software Used In Tutorial:
    -Visual Code (64-bit) User

    Project Description:
    -HTML, CSS, JavaScript

One moment, please…

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

DOM CSS: Thay đổi CSS bằng Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 8839 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu DOM CSS trong Javascript, cách thay đổi css bằng Javascript thông qua đối tượng DOM CSS.xem chi tiết hướng dẫn cách thay đổi css bằng js tại đây

DOM CSS trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 7873 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dựa vào hàm setAttribute trong bài trước thì chúng ta hoàn toàn có thể thêm css cho thẻ HTML, nhưng trong javascript còn hỗ trợ chúng ta một cách CSS chuyên nghiệp hơn nữa.

Hướng dẫn cách chèn thêm mã CSS và Javascript vào website – Synezi Blog

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

One moment, please…

  • Tác giả: gocchiase.net
  • Đánh giá: 3 ⭐ ( 3821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

3 cách thêm css vào Html

  • Tác giả: unitop.com.vn
  • Đánh giá: 5 ⭐ ( 3060 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

By ads_php