Áp dụng CSS cho lớp div

Trước khi chúng ta tìm hiểu cách xử lý các kiểu và lớp của JavaScript – đây là một quy tắc quan trọng. Hy vọng rằng nó đủ rõ ràng, nhưng chúng ta vẫn phải đề cập đến nó

Nói chung có hai cách để tạo kiểu cho một phần tử

1. Tạo một lớp trong CSS và thêm nó.

   
     
       alert[document.body.className]; // main page
     
   

   4
2. Viết thuộc tính trực tiếp vào

   
     
       alert[document.body.className]; // main page
     
   

   5.

   
     
       alert[document.body.className]; // main page
     
   

   6

JavaScript có thể sửa đổi cả lớp và thuộc tính

  
    alert[document.body.className]; // main page
  

5

Chúng ta nên luôn ưu tiên các lớp CSS hơn

  
    alert[document.body.className]; // main page
  

5. Cái sau chỉ nên được sử dụng nếu các lớp “không thể xử lý nó”

Ví dụ:

  
    alert[document.body.className]; // main page
  

5 được chấp nhận nếu chúng ta tính toán động tọa độ của một phần tử và muốn đặt chúng từ JavaScript, như thế này

let top = /* complex calculations */;
let left = /* complex calculations */;

elem.style.left = left; // e.g '123px', calculated at run-time
elem.style.top = top; // e.g '456px'

Đối với các trường hợp khác, như làm cho văn bản có màu đỏ, thêm biểu tượng nền – hãy mô tả điều đó trong CSS và sau đó thêm lớp [JavaScript có thể làm điều đó]. Điều đó linh hoạt hơn và dễ hỗ trợ hơn

Tên lớp và Danh sách lớp

Thay đổi lớp là một trong những hành động thường được sử dụng nhất trong tập lệnh

Vào thời cổ đại, có một giới hạn trong JavaScript. một từ dành riêng như

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

0 không thể là một thuộc tính đối tượng. Hạn chế đó hiện không tồn tại, nhưng vào thời điểm đó không thể có tài sản

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

0, như

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

2

Vì vậy, đối với các lớp, thuộc tính trông tương tự

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

3 đã được giới thiệu.

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

4 tương ứng với thuộc tính

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

0

Ví dụ

  
    alert[document.body.className]; // main page
  

Nếu chúng ta gán thứ gì đó cho

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

4, nó sẽ thay thế toàn bộ chuỗi lớp. Đôi khi đó là những gì chúng ta cần, nhưng thường thì chúng ta muốn thêm/xóa một lớp

Có một tài sản khác cho điều đó.

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

7

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

7 là một đối tượng đặc biệt với các phương thức để

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

9 một lớp duy nhất

Ví dụ

  
    // add a class
    document.body.classList.add['article'];

    alert[document.body.className]; // main page article
  

Vì vậy, chúng tôi có thể hoạt động trên cả chuỗi lớp đầy đủ bằng cách sử dụng

  
    alert[document.body.className]; // main page
  

90 hoặc trên các lớp riêng lẻ bằng cách sử dụng

  
    alert[document.body.className]; // main page
  

91. Những gì chúng tôi chọn phụ thuộc vào nhu cầu của chúng tôi

Phương pháp của

  
    alert[document.body.className]; // main page
  

91

• 
    
      alert[document.body.className]; // main page
    
  

  93 – thêm/xóa lớp

• 
    
      alert[document.body.className]; // main page
    
  

  94 – thêm lớp nếu nó không tồn tại, nếu không thì xóa nó

• 
    
      alert[document.body.className]; // main page
    
  

  95 – kiểm tra lớp đã cho, trả về

  
    
      alert[document.body.className]; // main page
    
  

  96

Bên cạnh đó,

  
    alert[document.body.className]; // main page
  

91 có thể lặp lại, vì vậy chúng ta có thể liệt kê tất cả các lớp với

  
    alert[document.body.className]; // main page
  

98, như thế này

  
    alert[document.body.className]; // main page
  

9

kiểu phần tử

Thuộc tính

  
    alert[document.body.className]; // main page
  

99 là một đối tượng tương ứng với những gì được viết trong thuộc tính

  
    alert[document.body.className]; // main page
  

00. Cài đặt

  
    alert[document.body.className]; // main page
  

01 hoạt động tương tự như khi chúng ta có trong thuộc tính

  
    alert[document.body.className]; // main page
  

5 một chuỗi

  
    alert[document.body.className]; // main page
  

03

Đối với thuộc tính nhiều từ, camelCase được sử dụng

  
    alert[document.body.className]; // main page
  

0

Ví dụ

  
    alert[document.body.className]; // main page
  

5

thuộc tính tiền tố

Các thuộc tính tiền tố của trình duyệt như

  
    alert[document.body.className]; // main page
  

04,

  
    alert[document.body.className]; // main page
  

05 cũng tuân theo quy tắc tương tự. một dấu gạch ngang có nghĩa là chữ hoa

Ví dụ

  
    alert[document.body.className]; // main page
  

8

Đặt lại thuộc tính kiểu

Đôi khi chúng tôi muốn gán một thuộc tính kiểu và sau đó xóa nó

Chẳng hạn, để ẩn một phần tử, chúng ta có thể đặt

  
    alert[document.body.className]; // main page
  

06

Sau đó, chúng tôi có thể muốn xóa

  
    alert[document.body.className]; // main page
  

07 như thể nó chưa được đặt. Thay vì

  
    alert[document.body.className]; // main page
  

08, chúng ta nên gán một chuỗi rỗng cho nó.

  
    alert[document.body.className]; // main page
  

09

  
    alert[document.body.className]; // main page
  

3

Nếu chúng ta đặt

  
    alert[document.body.className]; // main page
  

07 thành một chuỗi trống, thì trình duyệt sẽ áp dụng các lớp CSS và kiểu dựng sẵn của nó một cách bình thường, như thể không có thuộc tính

  
    alert[document.body.className]; // main page
  

07 nào như vậy cả

Ngoài ra còn có một phương pháp đặc biệt cho điều đó,

  
    alert[document.body.className]; // main page
  

52. Vì vậy, chúng tôi có thể loại bỏ một tài sản như thế này

  
    alert[document.body.className]; // main page
  

7

Viết lại toàn bộ với

  
    alert[document.body.className]; // main page
  

53

Thông thường, chúng tôi sử dụng

  
    alert[document.body.className]; // main page
  

54 để gán các thuộc tính kiểu riêng lẻ. Chúng tôi không thể đặt kiểu đầy đủ như

  
    alert[document.body.className]; // main page
  

55, vì

  
    alert[document.body.className]; // main page
  

56 là một đối tượng và nó chỉ đọc

Để đặt kiểu đầy đủ dưới dạng chuỗi, có một thuộc tính đặc biệt

  
    alert[document.body.className]; // main page
  

53

  
    alert[document.body.className]; // main page
  

3

Thuộc tính này hiếm khi được sử dụng vì phép gán như vậy sẽ loại bỏ tất cả các kiểu hiện có. nó không thêm, nhưng thay thế chúng. Đôi khi có thể xóa một cái gì đó cần thiết. Nhưng chúng tôi có thể sử dụng nó một cách an toàn cho các phần tử mới, khi chúng tôi biết rằng chúng tôi sẽ không xóa một kiểu hiện có

Điều tương tự có thể được thực hiện bằng cách thiết lập một thuộc tính.

  
    alert[document.body.className]; // main page
  

58

Lưu ý các đơn vị

Đừng quên thêm các đơn vị CSS vào các giá trị

Chẳng hạn, chúng ta không nên đặt

  
    alert[document.body.className]; // main page
  

59 thành

  
    alert[document.body.className]; // main page
  

80, mà nên đặt thành

  
    alert[document.body.className]; // main page
  

81. Nếu không nó sẽ không hoạt động

  
    alert[document.body.className]; // main page
  

0

Xin lưu ý. trình duyệt “giải nén” thuộc tính

  
    alert[document.body.className]; // main page
  

82 ở dòng cuối cùng và suy ra

  
    alert[document.body.className]; // main page
  

83 và

  
    alert[document.body.className]; // main page
  

84 từ nó

phong cách tính toán. getComputingStyle

Vì vậy, sửa đổi một phong cách là dễ dàng. Nhưng làm thế nào để đọc nó?

Chẳng hạn, chúng ta muốn biết kích thước, lề, màu sắc của một phần tử. Làm thế nào để làm nó?

Thuộc tính

  
    alert[document.body.className]; // main page
  

5 chỉ hoạt động trên giá trị của thuộc tính

  
    alert[document.body.className]; // main page
  

00, không có bất kỳ tầng CSS nào

Vì vậy, chúng tôi không thể đọc bất cứ thứ gì đến từ các lớp CSS bằng cách sử dụng

  
    alert[document.body.className]; // main page
  

99

Ví dụ ở đây

  
    alert[document.body.className]; // main page
  

5 không thấy lề

  
    alert[document.body.className]; // main page
  

1

…Nhưng điều gì sẽ xảy ra nếu chúng ta cần, chẳng hạn như tăng số tiền ký quỹ lên _______389?

Có một phương pháp khác cho điều đó.

  
    alert[document.body.className]; // main page
  

30

Cú pháp là

  
    alert[document.body.className]; // main page
  

2

elementElement để đọc giá trị cho. pseudoA pseudo-element nếu được yêu cầu, ví dụ như

  
    alert[document.body.className]; // main page
  

31. Một chuỗi trống hoặc không có đối số có nghĩa là chính phần tử đó

Kết quả là một đối tượng có kiểu, như

  
    alert[document.body.className]; // main page
  

99, nhưng bây giờ đối với tất cả các lớp CSS

Ví dụ

  
    alert[document.body.className]; // main page
  

3

Giá trị được tính toán và giải quyết

Có hai khái niệm trong CSS

1. Giá trị kiểu được tính toán là giá trị sau khi tất cả các quy tắc CSS và kế thừa CSS được áp dụng, là kết quả của phân tầng CSS. Nó có thể trông giống như

   
     
       alert[document.body.className]; // main page
     
   

   33 hoặc

   
     
       alert[document.body.className]; // main page
     
   

   34
2. Giá trị kiểu đã giải quyết là giá trị cuối cùng được áp dụng cho phần tử. Các giá trị như

   
     
       alert[document.body.className]; // main page
     
   

   35 hoặc

   
     
       alert[document.body.className]; // main page
     
   

   36 là tương đối. Ví dụ, trình duyệt lấy giá trị được tính toán và làm cho tất cả các đơn vị cố định và tuyệt đối.

   
     
       alert[document.body.className]; // main page
     
   

   37 hoặc

   
     
       alert[document.body.className]; // main page
     
   

   38. Đối với các thuộc tính hình học, các giá trị được phân giải có thể có một dấu chấm động, như

   
     
       alert[document.body.className]; // main page
     
   

   39

Cách đây đã lâu,

  
    alert[document.body.className]; // main page
  

30 đã được tạo ra để nhận các giá trị được tính toán, nhưng hóa ra các giá trị được phân giải thuận tiện hơn nhiều và tiêu chuẩn đã thay đổi

Vì vậy, ngày nay ________ 430 thực sự trả về giá trị đã phân giải của thuộc tính, thường là trong _______ 472 cho hình học

  
    alert[document.body.className]; // main page
  

30 yêu cầu tên tài sản đầy đủ

Chúng ta nên luôn yêu cầu chính xác tài sản mà chúng ta muốn, chẳng hạn như

  
    alert[document.body.className]; // main page
  

74 hoặc

  
    alert[document.body.className]; // main page
  

75 hoặc

  
    alert[document.body.className]; // main page
  

76. Nếu không, kết quả chính xác không được đảm bảo

Chẳng hạn, nếu có thuộc tính

  
    alert[document.body.className]; // main page
  

77, thì chúng ta nên lấy gì cho

  
    alert[document.body.className]; // main page
  

78?

Các kiểu được áp dụng cho liên kết

  
    alert[document.body.className]; // main page
  

79 bị ẩn

Các liên kết đã truy cập có thể được tô màu bằng cách sử dụng lớp giả CSS ________ 479

Nhưng

  
    alert[document.body.className]; // main page
  

30 không cấp quyền truy cập vào màu đó, vì nếu không, một trang tùy ý có thể tìm hiểu xem người dùng có truy cập một liên kết hay không bằng cách tạo liên kết đó trên trang và kiểm tra các kiểu

JavaScript có thể không thấy các kiểu được áp dụng bởi

  
    alert[document.body.className]; // main page
  

79. Ngoài ra, có một hạn chế trong CSS cấm áp dụng các kiểu thay đổi hình học trong

  
    alert[document.body.className]; // main page
  

79. Điều đó để đảm bảo rằng không có cách nào khác để một trang xấu kiểm tra xem một liên kết đã được truy cập hay chưa và do đó phá vỡ quyền riêng tư

Bản tóm tắt

Để quản lý các lớp, có hai thuộc tính DOM

• 
    
      alert[document.body.className]; // main page
    
  

  90 – giá trị chuỗi, tốt để quản lý toàn bộ các lớp

• 
    
      alert[document.body.className]; // main page
    
  

  91 – đối tượng có phương thức

  
    
      alert[document.body.className]; // main page
    
  

  36, tốt cho các lớp riêng lẻ

Để thay đổi phong cách

• Thuộc tính

  
    
      alert[document.body.className]; // main page
    
  

  5 là một đối tượng có kiểu dáng camelCased. Đọc và ghi vào nó có cùng ý nghĩa với việc sửa đổi các thuộc tính riêng lẻ trong thuộc tính

  
    
      alert[document.body.className]; // main page
    
  

  00. Để xem cách áp dụng

  
    
      alert[document.body.className]; // main page
    
  

  39 và những thứ hiếm khác – có một danh sách các phương pháp tại MDN

• Thuộc tính

  
    
      alert[document.body.className]; // main page
    
  

  53 tương ứng với toàn bộ thuộc tính

  
    
      alert[document.body.className]; // main page
    
  

  00, chuỗi phong cách đầy đủ

Để đọc các kiểu đã giải quyết [đối với tất cả các lớp, sau khi tất cả CSS được áp dụng và các giá trị cuối cùng được tính toán]

Tôi có thể đặt kiểu trong div không?

Lớp div là CSS hay HTML?

Bạn có thể thêm một lớp qua CSS không?

Div có thể có một lớp học không?