Tương tác giữa JavaScript và CSS. Thuộc tính CSS để kiểm soát kiểu chữ web. nội dung của tiêu đề này sẽ không được hiển thị

Khả năng tương tác giữa JavaScript và CSS

Cascading Style Sheets (CSS) là tiêu chuẩn đại diện trực quan Tài liệu HTML. Các biểu định kiểu xếp tầng được thiết kế để các nhà thiết kế sử dụng: chúng cho phép bạn xác định chính xác phông chữ, màu sắc, lề, căn chỉnh, tùy chọn đường viền và thậm chí cả tọa độ của các thành phần trong tài liệu.

Nhưng chúng cũng được các lập trình viên viết bằng JavaScript phía máy khách quan tâm vì chúng cho phép các hiệu ứng hoạt hình, chẳng hạn như nội dung tài liệu mờ dần từ cạnh phải, hoặc danh sách thu gọn và mở rộng, cho phép người dùng kiểm soát lượng nội dung được hiển thị . thông tin.

Quản lý kiểu nội tuyến

Cách dễ nhất để kiểm soát kiểu CSS là thao tác thuộc tính style của từng thành phần tài liệu riêng lẻ. Giống như hầu hết các thuộc tính HTML, thuộc tính style tương ứng với thuộc tính cùng tên trên đối tượng Element và có thể được thao tác trong các tập lệnh JavaScript. Tuy nhiên, thuộc tính style có một tính năng đặc biệt: giá trị của nó không phải là một chuỗi mà là một đối tượng CSSStyleDeclaration. Các thuộc tính của đối tượng này đại diện cho các thuộc tính CSS được xác định trong thuộc tính kiểu HTML.

Ví dụ: để hiển thị nội dung của thành phần văn bản e bằng phông chữ lớn, đậm, màu xanh lam, bạn có thể làm như sau để ghi các giá trị mong muốn vào các thuộc tính tương ứng với cỡ chữ, độ dày phông chữ và kiểu màu của cải:

E.style.fontSize = "24px"; e.style.fontWeight = "đậm"; e.style.color = "xanh";

Khi làm việc với thuộc tính kiểu của đối tượng CSSStyleDeclaration, hãy nhớ rằng tất cả các giá trị phải được chỉ định dưới dạng chuỗi. Trong biểu định kiểu hoặc thuộc tính kiểu, bạn có thể viết:

Vị trí: tuyệt đối; Họ phông chữ: sans-serif; màu nền: #ffffff;

Để làm tương tự cho phần tử e trong JavaScript, bạn cần đặt tất cả các giá trị trong dấu ngoặc kép:

E.style.position = "tuyệt đối"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";

Lưu ý rằng dấu chấm phẩy không được bao gồm trong giá trị chuỗi. Đây là những dấu chấm phẩy được sử dụng trong cú pháp JavaScript. Dấu chấm phẩy được sử dụng trong bảng Kiểu CSS, không cần thiết trong giá trị chuỗi, được cài đặt bằng JavaScript.

Ngoài ra, hãy nhớ rằng tất cả các thuộc tính định vị phải bao gồm các đơn vị đo lường. Đó là:

E.style.left = 300; // Sai: đây là số, không phải chuỗi e.style.left = "300"; // Sai: thiếu đơn vị e.style.left = "300px"; // Phải

Đơn vị được yêu cầu khi đặt thuộc tính kiểu trong JavaScript - giống như khi đặt thuộc tính kiểu trong biểu định kiểu.

Nhiều thuộc tính kiểu CSS, chẳng hạn như cỡ chữ, chứa dấu gạch nối trong tên của chúng. JavaScript diễn giải dấu gạch nối dưới dạng dấu trừ, do đó không thể viết biểu thức sau:

E.style.font-size = "24px"; // Lỗi cú pháp!

Do đó, tên thuộc tính của đối tượng CSSStyleDeclaration hơi khác so với tên của thuộc tính CSS thực tế. Nếu tên thuộc tính CSS chứa dấu gạch nối, tên thuộc tính của đối tượng CSSStyleDeclaration sẽ được hình thành bằng cách loại bỏ dấu gạch nối và viết hoa chữ cái ngay sau mỗi dấu gạch nối. Nói cách khác, thuộc tính CSS border-left-width được truy cập thông qua thuộc tính borderLeftWidth và thuộc tính CSS font-family có thể được truy cập thông qua thuộc tính fontFamily.

Ngoài ra, khi một thuộc tính CSS, chẳng hạn như float, có tên khớp với từ dành riêng của JavaScript, thì tên đó sẽ có tiền tố "css" để tạo tên thuộc tính đối tượng CSSStyleDeclaration hợp lệ. Nghĩa là, để đọc hoặc thay đổi giá trị Thuộc tính nổi CSS phần tử, bạn nên sử dụng thuộc tính cssFloat của đối tượng CSSStyleDeclaration.

Thuộc tính style của một phần tử HTML là kiểu nội tuyến của nó và nó ghi đè mọi quy tắc tạo kiểu trong bảng CSS. Kiểu nội tuyến thường thuận tiện khi sử dụng để đặt giá trị kiểu và đây là cách tiếp cận được sử dụng trong tất cả các ví dụ ở trên. Tập lệnh có thể đọc các thuộc tính của đối tượng CSSStyleDeclaration biểu thị kiểu nội tuyến, nhưng chúng chỉ trả về các giá trị có ý nghĩa nếu trước đó chúng được đặt bởi tập lệnh JavaScript hoặc nếu phần tử HTML có thuộc tính kiểu nội tuyến đặt các thuộc tính mong muốn.

Ví dụ: một tài liệu có thể bao gồm một biểu định kiểu đặt lề trái cho tất cả các đoạn văn thành 30 pixel, nhưng việc đọc thuộc tính leftMargin của một trong các phần tử này sẽ trả về một dòng trống trừ khi đoạn văn đó có thuộc tính style ghi đè giá trị được đặt bởi bảng định kiểu.

Việc đọc kiểu nội tuyến của một phần tử đặc biệt khó khăn khi đọc các thuộc tính kiểu có đơn vị hoặc thuộc tính ký hiệu tốc ký: tập lệnh phải bao gồm nhiều hơn một thực hiện đơn giản phân tích chuỗi bằng các kiểu CSS để cho phép trích xuất và sử dụng thêm các giá trị. Nói chung, kiểu phần tử nội tuyến chỉ thuận tiện khi sử dụng cho việc cài đặt kiểu.

Đôi khi việc đọc hoặc viết một dòng vào kiểu nội tuyến của một phần tử sẽ dễ dàng hơn là truy cập đối tượng CSSStyleDeclaration. Để thực hiện việc này, bạn có thể sử dụng các phương thức getAttribution() và setAttribution() của đối tượng Element hoặc thuộc tính cssText của đối tượng CSSStyleDeclaration:

// Cả hai câu lệnh bên dưới đều đặt thuộc tính style // của phần tử e thành chuỗi s: e.setAttribution("style", s); e.style.cssText = s; // Cả hai lệnh bên dưới đều nhận một giá trị thuộc tính phong cách// phần tử e dưới dạng chuỗi: s = e.getAttribution("style"); s = e.style.cssText;

Sự sáng tạo hiệu ứng hoạt hình sử dụng CSS

Một trong những khu vực điển hình nhất áp dụng CSS là sự tái tạo các hiệu ứng hoạt hình trực quan. Bạn có thể triển khai chúng bằng các phương thức setTimeout() hoặc setInterval(), sử dụng chúng để tổ chức nhiều lệnh gọi đến một hàm thay đổi kiểu nội tuyến của một phần tử.

// Làm cho phần tử e có thể định vị được và di chuyển nó sang trái và phải. // Đối số đầu tiên có thể là đối tượng phần tử hoặc giá trị thuộc tính id của // phần tử mong muốn. Nếu bạn chuyển một hàm làm đối số thứ hai, nó sẽ được gọi với e // làm đối số khi hoạt ảnh kết thúc phát. Đối số thứ ba xác định // giá trị offset của phần tử e. Mặc định là 5 pixel. // Đối số thứ tư xác định hiệu ứng sẽ phát trong bao lâu. // Theo mặc định hiệu ứng kéo dài 500ms. function shake(e, oncomplete, distance, time) ( // Xử lý các đối số if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; if (!distance) distance = 5; var originalStyle = e.style.cssText; // Lưu kiểu gốc e.style.position = "relative"; // Đặt kiểu tương đối var start = (new Date()).getTime(); Ghi nhớ điểm bắt đầu của hoạt ảnh animate(); // Bắt đầu hoạt ảnh // Hàm này kiểm tra thời gian đã trôi qua và thay đổi tọa độ của e. // Nếu đến lúc kết thúc hoạt ảnh, nó sẽ khôi phục trạng thái ban đầu // của phần tử e. Ngược lại, nó sẽ thay đổi tọa độ của e và lên lịch cho hàm animate() ( var now = (new Date()).getTime(); // Lấy thời gian hiện tại var elapsed = now-start; / / Đã bao nhiêu thời gian trôi qua kể từ khi bắt đầu? var phân số = đã trôi qua / thời gian; // Phân số thời gian cần thiết?

Cả shake() và fadeOut() đều chấp nhận một hàm tùy chọn gọi lại trong lập luận thứ hai. Nếu chức năng này được chỉ định, nó sẽ được gọi khi hiệu ứng hoạt hình phát xong. Phần tử được áp dụng hiệu ứng hoạt hình sẽ được chuyển đến hàm gọi lại dưới dạng đối số. Kế tiếp đánh dấu HTML tạo một nút mà khi được nhấp vào sẽ phát hiệu ứng rung và sau đó là hiệu ứng hòa tan:

Nhấp vào đây!

Hãy lưu ý rằng các hàm shake() và fadeOut() giống nhau như thế nào. Cả hai đều có thể đóng vai trò là mẫu để triển khai các hiệu ứng hoạt hình tương tự bằng cách sử dụng thuộc tính CSS.

Kiểu tính toán

Thuộc tính style của phần tử chỉ định kiểu nội tuyến của phần tử. Nó có lợi thế hơn tất cả các biểu định kiểu và có thể được sử dụng thành công để đặt thuộc tính CSS nhằm thay đổi hình thức trực quan của một phần tử. Tuy nhiên, trong trường hợp chung không có ích gì khi gọi nó khi bạn cần tìm ra các kiểu thực tế được áp dụng cho một phần tử. Những gì được yêu cầu trong trường hợp này được gọi là kiểu tính toán.

Kiểu được tính toán của một phần tử là tập hợp các giá trị thuộc tính mà trình duyệt đã thu được (hoặc được tính toán) từ kiểu nội tuyến và tất cả các quy tắc từ tất cả các biểu định kiểu áp dụng cho phần tử: đó là tập hợp các thuộc tính thực sự được sử dụng khi hiển thị kiểu yếu tố. Giống như kiểu nội tuyến, kiểu được tính toán được thể hiện bằng đối tượng CSSStyleDeclaration. Tuy nhiên, không giống như kiểu nội tuyến, kiểu được tính toán là chỉ đọc. Các kiểu này không thể thay đổi, nhưng đối tượng CSSStyleDeclaration được tính toán cho phép bạn biết chính xác các giá trị của thuộc tính kiểu mà trình duyệt sử dụng khi hiển thị phần tử tương ứng.

Bạn có thể lấy kiểu được tính toán của một phần tử bằng phương thức getComputedStyle() của đối tượng Window. Đối số đầu tiên của phương thức này là phần tử có kiểu tính toán mà bạn muốn trả về. Đối số thứ hai là bắt buộc và thường truyền null hoặc chuỗi trống, nhưng nó cũng có thể truyền một chuỗi có tên phần tử giả CSS chẳng hạn như "::trước", "::after", ":first-line" hoặc " :chữ cái đầu tiên":

Tiêu đề Var = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(element, null);

Giá trị trả về của phương thức getComputedStyle() là một đối tượng CSSStyleDeclaration đại diện cho tất cả các kiểu được áp dụng cho phần tử (hoặc phần tử giả) đã chỉ định. Có nhiều sự khác biệt đáng kể giữa các đối tượng CSSStyleDeclaration đại diện cho kiểu nội tuyến và kiểu được tính toán:

Thuộc tính kiểu được tính toán chỉ có thể đọc.

Thuộc tính kiểu tính toán có giá trị tuyệt đối: Các đơn vị đo lường tương đối như phần trăm và điểm được chuyển đổi thành giá trị tuyệt đối. Bất kỳ thuộc tính nào chỉ định kích thước (chẳng hạn như chiều rộng lề hoặc kích thước phông chữ) sẽ có giá trị được biểu thị bằng pixel. Tức là giá trị của nó sẽ là một chuỗi có hậu tố "px", vì vậy bạn sẽ cần triển khai nó phân tích cú pháp, nhưng bạn sẽ không phải lo lắng về việc xác định và chuyển đổi đơn vị đo lường. Các giá trị thuộc tính xác định màu sẽ được trả về ở định dạng "rgb(#,#,#)" hoặc "rgba(#,#,#,#)".

Các thuộc tính là ký hiệu tốc ký không được đánh giá - chỉ các thuộc tính cơ bản mà chúng dựa vào. Ví dụ: bạn không nên cố gắng lấy giá trị của thuộc tính lề mà thay vào đó hãy truy cập các thuộc tính lềLeft, lềTop, v.v.

Thuộc tính cssText của kiểu được tính toán không được xác định.

Làm việc với các kiểu được tính toán có thể khá phức tạp và việc truy cập chúng có thể không phải lúc nào cũng trả về thông tin bạn mong đợi. Hãy xem thuộc tính font-family làm ví dụ: nó chấp nhận danh sách tên họ phông chữ được phân tách bằng dấu phẩy để đảm bảo tính tương thích. Khi đọc thuộc tính fontFamily của kiểu được tính toán, bạn đang đợi giá trị của kiểu họ phông chữ cụ thể nhất được áp dụng cho phần tử. Và trong trường hợp này, một giá trị như “arial, helvetica, sans-serif” có thể được trả về, giá trị này không nói lên điều gì về kiểu chữ của phông chữ thực tế được sử dụng.

Quản lý biểu định kiểu

Cho đến nay chúng ta đã biết cách thiết lập và nhận các giá trị thuộc tính kiểu CSS và các lớp phần tử riêng lẻ. Tuy nhiên, cũng có khả năng tự thao tác với các biểu định kiểu CSS. Điều này thường không cần thiết, nhưng đôi khi nó có thể hữu ích và phần này sẽ phác thảo ngắn gọn các kỹ thuật có thể thực hiện được.

Khi làm việc với các style sheet, bạn sẽ gặp hai loại đối tượng. Loại đầu tiên là các đối tượng Element, đại diện cho các phần tử và chứa hoặc tham chiếu các biểu định kiểu. Đây là các thành phần tài liệu thông thường và nếu bạn xác định thuộc tính id trên chúng, bạn có thể chọn chúng bằng phương thức document.getElementById().

Loại đối tượng thứ hai là các đối tượng CSSStyleSheet, đại diện cho chính các biểu định kiểu. Thuộc tính document.styleSheets trả về một đối tượng giống như mảng chỉ đọc có chứa các đối tượng CSSStyleSheet đại diện cho các biểu định kiểu của tài liệu. Nếu bạn xác định thuộc tính tiêu đề trên một phần tử hoặc xác định hoặc tham chiếu đến biểu định kiểu, đối tượng đó sẽ có sẵn dưới dạng thuộc tính của đối tượng CSSStyleSheet với tên được chỉ định trong thuộc tính tiêu đề.

Các phần sau đây mô tả những thao tác nào có thể được thực hiện trên các phần tử và đối tượng biểu định kiểu này.

Bật hoặc tắt biểu định kiểu

Kỹ thuật đơn giản nhất để làm việc với các biểu định kiểu cũng là kỹ thuật di động và đáng tin cậy nhất. Các phần tử và đối tượng CSSStyleSheet xác định một thuộc tính bị vô hiệu hóa có thể được đọc và ghi bằng các tập lệnh JavaScript. Đúng như tên gọi của nó, nếu thuộc tính bị vô hiệu hóa được đặt thành true, biểu định kiểu sẽ bị vô hiệu hóa và sẽ bị trình duyệt bỏ qua.

Điều này được thể hiện rõ ràng qua hàm vô hiệu hóaStylesheet() bên dưới. Nếu bạn cung cấp cho nó một số, nó sẽ hiểu nó như một chỉ mục trong mảng document.styleSheets. Nếu bạn cho nó một chuỗi, nó sẽ hiểu nó là Bộ chọn CSS, chuyển nó tới phương thức document.querySelectorAll() và đặt thuộc tính khuyết tật của tất cả các phần tử nhận được thành true:

Hàm vô hiệu hóaStylesheet(ss) ( if (typeof ss === "number") document.styleSheets.disabled = true; else ( var sheet = document.querySelectorAll(ss); for(var i = 0; i

Lấy, chèn và xóa quy tắc khỏi biểu định kiểu

Ngoài việc cung cấp khả năng bật hoặc tắt biểu định kiểu, đối tượng CSSStyleSheet còn xác định API để truy xuất, chèn và xóa quy tắc kiểu khỏi biểu định kiểu. IE8 và các phiên bản cũ hơn triển khai API hơi khác so với API tiêu chuẩn do các trình duyệt khác triển khai.

Nói chung, thao tác trực tiếp với style sheet hiếm khi hữu ích. Thay vì thêm các quy tắc mới vào biểu định kiểu, tốt hơn là nên để chúng tĩnh và làm việc với thuộc tính className của phần tử. Đồng thời, nếu cần tạo cơ hội cho người dùng toàn quyền kiểm soát các biểu định kiểu trang web, bạn có thể cần sắp xếp để thao tác với bảng động.

Các đối tượng CSSStyleSheet được lưu trữ trong mảng document.styleSheets. Đối tượng CSSStyle Sheet có thuộc tính cssRules lưu trữ một loạt các quy tắc kiểu:

Var firstRule = document.styleSheets.cssRules;

Trong IE thuộc tính này được gọi là quy tắc, không phải cssRules.

Các phần tử của mảng cssRules hoặc quy tắc là các đối tượng CSSRule. Trong API tiêu chuẩn, đối tượng CSSRule có thể biểu thị bất kỳ loại quy tắc CSS nào, bao gồm cả @rules chẳng hạn như chỉ thị @import và @page. Tuy nhiên, trong IE, mảng quy tắc chỉ có thể chứa các quy tắc biểu định kiểu thực tế.

Đối tượng CSSRule có hai thuộc tính có thể được sử dụng theo cách di động. (Trong API tiêu chuẩn, các quy tắc phi kiểu không có các thuộc tính này, vì vậy bạn có thể cần bỏ qua chúng khi duyệt qua biểu định kiểu.) Thuộc tính selectorText là một bộ chọn CSS cho của quy tắc này và thuộc tính style là tham chiếu đến đối tượng CSSStyleDeclaration có thể ghi, mô tả các kiểu được liên kết với bộ chọn này. Xin nhắc lại, CSSStyleDeclaration là cùng loại được sử dụng để biểu thị các kiểu nội tuyến và kiểu được tính toán.

Đối tượng CSSStyleDeclaration có thể được sử dụng để đọc các kiểu hiện có hoặc tạo các kiểu mới trong các quy tắc. Thông thường, khi duyệt qua một biểu định kiểu, chính văn bản của quy tắc đó mới là điều đáng quan tâm chứ không phải phần trình bày được phân tích cú pháp của nó. Trong trường hợp này, bạn có thể sử dụng thuộc tính cssText của đối tượng CSSStyleDeclaration, chứa các quy tắc trong cách trình bày văn bản.

Ngoài khả năng truy xuất và sửa đổi các quy tắc biểu định kiểu hiện có, bạn còn có khả năng thêm quy tắc vào và xóa quy tắc khỏi biểu định kiểu. Giao diện ứng dụng tiêu chuẩn định nghĩa các phương thức InsertRule() và deleteRule() cho phép bạn thêm và xóa các quy tắc:

Document.styleSheets.insertRule("H1 ( text-weight: đậm; )", 0);

Trình duyệt IE không hỗ trợ các phương thức InsertRule() và deleteRule() nhưng nó định nghĩa các hàm addRule() và RemoveRule() gần như tương đương với chúng. Sự khác biệt lớn duy nhất (ngoài tên hàm) là addRule() mong muốn nhận được bộ chọn và kiểu trong hình thức văn bản trong hai lập luận riêng biệt.

Tạo biểu định kiểu mới

Cuối cùng, bạn có thể tạo các biểu định kiểu hoàn toàn mới và thêm chúng vào tài liệu của mình. Trong hầu hết các trình duyệt, thao tác này được thực hiện bằng cách sử dụng các kỹ thuật tiêu chuẩn được triển khai trong DOM: một phần tử mới được tạo và chèn vào tài liệu trong phần, sau đó nội dung của biểu định kiểu sẽ được thêm bằng thuộc tính InnerHTML. Tuy nhiên, trong IE8 trở lên phiên bản trước một đối tượng CSSStyleSheet mới phải được tạo bằng phương thức không chuẩn document.createStyleSheet() và thêm văn bản biểu định kiểu bằng thuộc tính cssText.

Ví dụ dưới đây minh họa việc tạo các bảng mới:

// Thêm một style sheet vào tài liệu và điền vào nó với các style đã chỉ định. // Đối số kiểu có thể là một chuỗi hoặc một đối tượng. Nếu là một chuỗi, // nó được hiểu là văn bản biểu định kiểu. Nếu nó là một đối tượng thì mỗi thuộc tính // của nó phải xác định một quy tắc kiểu để được thêm vào bảng. // Tên thuộc tính là bộ chọn và giá trị của chúng là kiểu dáng tương ứng function addStylesheet(styles) ( // Đầu tiên bạn cần tạo một style sheet mới var styleElt, styleSheet; if (document.createStyleSheet) ( //If the API IE đã được xác định, hãy sử dụng nó styleSheet = document .createStyleSheet(); ) else ( var head = document.getElementsByTagName("head"); styleElt = document.createElement("style"); // Yếu tố mới head.appendChild(styleElt); // Chèn vào // Bây giờ bảng mới nằm ở cuối mảng styleSheet = document.styleSheets; ) // Chèn kiểu vào bảng if (typeof styles === "string") ( // Đối số chứa định nghĩa văn bản của biểu định kiểu if (styleElt) styleElt.innerHTML = styles; else styleSheet.cssText = styles; // IE API ) else ( // Đối tượng đối số có quy tắc chèn var i = 0; for(selector in styles) ( if (styleSheet.insertRule) ( var Rule = selector + " (" + styles + ")"; styleSheet.insertRule (quy tắc, i++ ); ) khác ( styleSheet.addRule(selector, styles, i++); ) ) ) )

Chúc một ngày tốt lành, những người đăng ký thân mến!

Trong html có thể làm cho một đối tượng hiển thị hoặc vô hình, và có Các tùy chọn khác nhau và chúng hiển thị nội dung khác nhau.

Vì vậy, hãy bắt đầu.

Hãy tưởng tượng một tình huống: chúng ta cần ghép một đoạn văn bản khá lớn vào một khối 200 x 300 pixel (về nguyên tắc, nó có thể là bất cứ thứ gì).

Nếu chúng ta đặt khối với sự trợ giúp của các kiểu thành chiều rộng 200 và chiều cao 300 pixel thì chiều cao của khối sẽ kéo dài bằng nội dung trong khối. Nhưng chúng tôi cần chiều cao đúng 300 pixel! Trong trường hợp này, chúng tôi làm như sau:

Đối với khối của chúng tôi, chúng tôi đặt thuộc tính tràn với giá trị cuộn. Khối này sẽ có kích thước mà chúng ta cần, tất cả nội dung đều nằm gọn trong đó và các thanh cuộn xuất hiện.

Các giá trị thuộc tính tràn được đưa ra dưới đây:

tràn – kiểm soát kích thước của một đối tượng nếu nội dung của nó không thể được hiển thị hoàn toàn.

Giá trị:

tự động – được xác định bởi trình duyệt.

có thể nhìn thấy - kích thước được kéo dài đến mức có thể nhìn thấy tất cả nội dung.

ẩn – bất kỳ thứ gì vượt quá ranh giới của phần tử sẽ không được hiển thị.

cuộn – Tất cả nội dung được hiển thị và thanh cuộn xuất hiện.

Đối với trường hợp cụ thể của chúng tôi, một ví dụ:

XHTML

#st1( tràn: cuộn; chiều rộng:200px; chiều cao:300px; ) Một đoạn văn bản khá lớn

Có một thuộc tính cho phép bạn kiểm soát mức độ hiển thị nội dung của phần tử.

khả năng hiển thị - kiểm soát trong CSS khả năng hiển thị nội dung của một phần tử.

Giá trị:

XHTML

nội dung của tiêu đề này sẽ không được hiển thị

Thuộc tính tiếp theo cho phép bạn kiểm soát mức độ hiển thị của một khối là display .

display - xác định cách phần tử sẽ được hiển thị

Giá trị:

không có - phần tử không được hiển thị

khối - ngắt dòng trước và sau phần tử (tức là phần tử không thể nằm trên cùng một dòng với các phần tử khác)

nội tuyến - không ngắt dòng

Làm thế nào để sử dụng tài sản này?

Giả sử chúng ta có văn bản, trong văn bản này có một thẻ hoặc có thể là một liên kết và chúng ta cần nội dung của thẻ hoặc liên kết này được hiển thị trên một dòng riêng biệt, sau đó chúng ta sẽ đặt chúng thuộc tính hiển thị với khối giá trị. Và ngược lại, nếu cần, giả sử thẻ không nằm trên một dòng riêng biệt mà nằm trên cùng một dòng với văn bản, thì chúng ta đặt thuộc tính display của nó với giá trị inline .

XHTML

sẽ nằm trên cùng một dòng với văn bản được hiển thị trên một dòng riêng biệt

Giá trị không đáng được quan tâm đặc biệt. Nếu chúng ta đặt thuộc tính hiển thị cho bất kỳ phần tử nào có giá trị không thì phần tử này sẽ không được hiển thị. Hơn nữa, không giống như thuộc tính hiển thị có giá trị ẩn, phần tử này sẽ không được hiển thị hoàn toàn (thuộc tính hiển thị có giá trị ẩn sẽ không hiển thị nội dung của phần tử và chính phần tử đó sẽ chiếm vị trí của nó trên trang).

Tóm tắt: Truy cập vào style sheet. Thuộc tính của bảng định kiểu. Thêm và xóa các quy tắc. Thay đổi kiểu phần tử. Tên lớp phần tử.

Chúng ta hãy xem (trong khoảnh khắc này) ví dụ lý thuyết - hãy có một trang web trình bày một loạt bài viết kỹ thuật. Chúng tôi muốn làm nổi bật một số bài viết này bằng băng chuyền hoạt hình thú vị, nhưng còn những người dùng không bật JavaScript vì lý do nào đó thì sao? Nhớ lại những gì chúng ta đã học về JavaScript kín đáo, chúng ta muốn chức năng của trang Web cũng hoạt động cho những người dùng đó, nhưng chúng ta có thể muốn thiết kế trang web một cách khác biệt cho những người dùng đó để họ có thể sử dụng trang web một cách thoải mái, ngay cả khi không có băng chuyền.

Nếu bạn muốn xóa quy tắc này, bạn có thể gọi hàm stylesheet.deleteRule(index), trong đó chỉ mục sẽ là chỉ mục của quy tắc sẽ bị xóa.

Trong ví dụ minh họa các bài viết, bạn có thể tạo một quy tắc làm cho thuộc tính hiển thị bằng không cho tất cả các bài viết về HTML và JavaScript - hãy xem ví dụ về băng chuyền (http://dev.opera.com/articles/view/dynamic- style-css-javascript/carousel .html) để xem nó hoạt động như thế nào.

Lưu ý: IE không thực hiện các quy tắc theo tiêu chuẩn. Nó sử dụng các quy tắc thay vì thuộc tính cssRules. IE cũng sử dụng RemoveRule thay vì deleteRule và addRule( selector , quy tắc, chỉ mục) thay vì InsertRule .

Thay đổi kiểu phần tử

Bây giờ bạn đã hiểu cách chỉnh sửa các biểu định kiểu được liên kết với một trang cũng như tạo và sửa đổi các quy tắc CSS trong đó. Nếu bạn muốn thay đổi một thành phần cụ thể trong DOM thì sao? Sử dụng API DOM, bạn có thể truy cập các thành phần trang cụ thể. Quay lại ví dụ về băng chuyền, bạn có thể thấy rằng các hàm được xác định theo cách mà khi bạn nhấp vào một bài viết, bài viết đó sẽ được đánh dấu, trong khi nội dung chính của bài viết được hiển thị bên dưới.

Sử dụng DOM, chúng ta truy cập vào đối tượng kiểu, mô tả kiểu của tài liệu. Đối tượng kiểu này được định nghĩa là CSSStyleDeclaration; giải thích chi tiếtĐiều này có thể được tìm thấy trong tài liệu W3C cho giao diện CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Đối tượng kiểu không hoạt động hoàn toàn giống như một số thuộc tính khác được xác định trên phần tử HTML. Không giống như element.href hoặc element.id trả về chuỗi, element.style trả về một đối tượng. Điều này có nghĩa là không thể đặt kiểu bằng cách gán chuỗi cho element.style .

Đối tượng kiểu có các thuộc tính tương ứng với các thuộc tính CSS được chỉ định khác nhau. Ví dụ: style.color trả về màu được chỉ định trên phần tử. Làm element.style.color = "red"; Bạn có thể tự động thay đổi phong cách. Dưới đây là hàm chuyển màu của phần tử thành màu đỏ khi được truyền id của phần tử đó.

hàm colorElementRed(id) ( var el = document.getElementById(id); el.style.color = "red"; )

Bạn cũng có thể sử dụng setAttribution(key, value) để tạo kiểu cho phần tử. Ví dụ: đặt màu của một phần tử thành màu đỏ bằng cách gọi element.setAttribution("style", "color: red"); , nhưng hãy cẩn thận vì điều này sẽ loại bỏ mọi thay đổi được thực hiện đối với đối tượng kiểu.

Khi kiểu của một phần tử được chỉ định theo cách này, nó giống như khi chúng ta chỉ định nó làm khai báo thuộc tính kiểu phần tử html. Kiểu này sẽ chỉ được áp dụng khi tầm quan trọng và tính đặc hiệu của quy tắc lớn hơn các quy tắc khác áp dụng cho phần tử (tính đặc hiệu được giải thích trong Chương 28 về Kế thừa và phân tầng CSS).

Một số bạn có thể thắc mắc điều gì sẽ xảy ra khi một thuộc tính được đặt

Và cùng ngày, các nhà khoa học đã khiến trọng lực phải lo lắng. Sự trùng hợp ngẫu nhiên? Không khác.

Mẫu từ bài viết trước bao gồm 90% trường hợp đa giai đoạn Tải CSS, và tính đơn giản của nó là khá rõ ràng. Nhưng bạn có muốn nghe về một mẫu hoạt động ~100% thời gian và cũng cực kỳ phức tạp không? Sau đó tôi mời bạn cùng tôi đi đến đoạn tiếp theo...

Thiếu 10%

Trong khi CSS đang tải, trình phân tích cú pháp đang chặn, điều đó có nghĩa là việc hiển thị bị chặn đối với tất cả nội dung tiếp theo. Theo trang demo từ bài viết nêu trên, quá trình kết xuất được chia thành các giai đoạn sau.

Điện thoại di động Máy tính

Điều này rất hữu ích trên thiết bị di động, trong đó mỗi CSS cho một phần sẽ tự chặn chính nó và tất cả các phần tiếp theo, nhưng trên máy tính để bàn, CSS cho phần chính và các nhận xét ở cột bên trái sẽ chặn không cho hiển thị thông tin về tôi ở cột bên phải, ngay cả khi CSS dành cho về tôi được tải đầu tiên. Điều này là do thứ tự chặn được xác định bởi thứ tự trong mã nguồn, nhưng đối với thiết kế này, sẽ rất tuyệt nếu cột bên phải xuất hiện trước cột bên trái.

Chúng ta cần xây dựng một cây phụ thuộc trong đó việc hiển thị từng phần tử bị chặn trước khi hiển thị các phần tử cụ thể khác. Ngoài ra, các phần phụ thuộc sẽ có thể thay đổi khi chiều rộng của khung nhìn thay đổi. Nghe có vẻ hấp dẫn phải không?

Điều này có thể được thực hiện bằng cách sử dụng các thuộc tính CSS tùy chỉnh...

Thuộc tính CSS tùy chỉnh

Nhưng đối với cuộc trò chuyện của chúng ta hôm nay, chỉ cần biết điều này là đủ...

Html ( nền: var(--gloop, red); )

Ở đây, chúng tôi đặt nền trang thành giá trị từ thuộc tính tùy chỉnh --gloop và nếu nó không có thuộc tính này, hãy đặt nó thành màu đỏ làm dự phòng. Kết quả là nền sẽ có màu đỏ. Nhưng nếu bạn thêm:

:root ( --gloop: xanh; )

...chúng tôi đặt thuộc tính tùy chỉnh --gloop thành green , vì vậy trang hiện có màu xanh lục. Nhưng nếu bạn thêm:

:root ( --gloop: ban đầu; )

Giá trị ban đầu được xử lý theo cách đặc biệt ở đây. Nó thực sự ghi đè --gloop để nền trang lại có màu đỏ.

Xây dựng cây phụ thuộc hiển thị bằng thuộc tính CSS tùy chỉnh

Khi hoàn thành danh hiệu này, tôi đã rất vui vì mình thông minh đến thế nào.

HTML [ "/main.css", "/comments.css", "/about-me.css", "/footer.css" ].map(url => ( const link = document.createElement("link" ); link.rel = "biểu định kiểu"; link.href = url; document.head.appendChild(link));

Vì vậy, bạn có thể tải /initial.css bằng cách sử dụng hoặc nhúng nó vì nó vẫn chặn hiển thị. Nhưng chúng tôi tải tất cả các bảng định kiểu khác một cách không đồng bộ.

init.css main, .comments, .about-me, footer ( display: none; ) :root ( --main-blocker: none; --comments-blocker: none; --about-me-blocker: none; - -footer-blocker: none; ) /* Các kiểu ban đầu khác... */

Chúng tôi ẩn các phần mà chúng tôi chưa sẵn sàng hiển thị và sau đó đối với mỗi phần, chúng tôi tạo một thuộc tính “trình chặn” tùy chỉnh.

main.css :root ( --main-blocker:init; ) main ( display: var(--main-blocker, block); ) /* Các kiểu nội dung chính khác... */

Nội dung chính không có bất kỳ phụ thuộc hiển thị nào. Khi CSS được tải, trình chặn của nó sẽ bị hủy (với tên viết tắt) và được hiển thị.

comments.css :root ( --comments-blocker: var(--main-blocker); ) .comments ( display: var(--comments-blocker, block); ) /* Các kiểu bình luận khác... */

Bình luận không được hiển thị trước nội dung chính, vì vậy trình chặn bình luận được liên kết với --main-blocker . Block.comments sẽ hiển thị ngay khi CSS này được tải và --main-blocker bị hủy

about-me.css :root ( --about-me-blocker: var(--comments-blocker); ) .about-me ( display: var(--about-me-blocker, block); )

Tương tự như đoạn mã trên, .about-me phụ thuộc vào CSS và nhận xét của nó. Nhưng khi trang rộng hơn, nó được hiển thị thành hai cột, vì vậy chúng ta không cần .about-me phụ thuộc vào nhận xét để hiển thị nữa:

@media (min-width: 600px) ( :root ( --about-me-blocker:init; ) ) /* Các kiểu khác cho giới thiệu về tôi... */

Sẵn sàng! Khi chiều rộng khung nhìn lớn hơn 600px, .about-me sẽ được hiển thị ngay sau khi CSS của nó được tải.

footer.css :root ( --footer-blocker: var(--main-blocker, var(--about-me-blocker)); ) footer ( display: var(--footer-blocker, block); ) / * Phong cách khác... */

Phần chân trang sẽ xuất hiện sau khi phần nội dung chính và phần giới thiệu về tôi xuất hiện. Để làm điều này, --footer-blocker lấy giá trị của nó từ --main-blocker , nhưng ngay sau khi hủy --main-blocker --footer-blocker sẽ quay trở lại giá trị lấy từ --about-me-blocker .

Thử nghiệm

Yêu cầu Chrome Canary hoặc Firefox.

Trong bản demo này, CSS được tải không đồng bộ, mất khoảng 0-5 giây để tải từng tệp. Mặc dù vậy, trang sẽ không bao giờ xuất hiện theo thứ tự và mỗi phần sẽ xuất hiện sớm nhất có thể tùy thuộc vào độ rộng của trình duyệt.

Nhưng... điều này có thực tế không?

Phương pháp này phức tạp hơn nhiều, với lợi ích tối thiểu và các vấn đề tương thích ngược rất lớn. Nhưng nó thể hiện sức mạnh của các thuộc tính CSS tùy chỉnh mà các giải pháp như biến thời gian biên dịch Sass không thể làm được.

Nếu bạn thực sự muốn làm điều gì đó tương tự ngày hôm nay, thì bạn có thể gánh vác phần lớn công việc tải không đồng bộ CSS sử dụng LoadCSS và thêm các lớp vào khi một số kiểu nhất định được tải (), mặc dù điều này sẽ dẫn đến rất nhiều vấn đề cụ thể được giải quyết thông qua hack.

Tôi đoán bài viết này có thể được coi là một "ví dụ thú vị", nhưng chúng ta hầu như chưa bắt đầu khám phá sức mạnh của các thuộc tính tùy chỉnh CSS.

Cảm ơn Remy Sharp đã sửa chữa. Liệu tôi có bao giờ có một bài viết mà không có lỗi chính tả? Nidokgah.

Bạn có thể đặt thuộc tính của các kiểu khác nhau trực tiếp trong phần đánh dấu hoặc sử dụng biểu định kiểu. Thuộc tính có thể được sử dụng để gán một lớp CSSđến một kiểu menu điều khiển một số khía cạnh của giao diện của điều khiển. Ví dụ sau đây cho thấy cách chỉ định một thuộc tính cho một số thuộc tính bạn có thể sau đó tham chiếu trong một biểu định kiểu.

...

Lưu ý rằng cách tốt nhất là chỉ định kiểu nội tuyến trong đánh dấu hoặc sử dụng thuộc tính và chỉ định kiểu bằng biểu định kiểu. Bạn không nên chỉ định cả kiểu nội tuyến và sử dụng biểu định kiểu vì có thể xảy ra hành vi không mong muốn. Để biết thảo luận chung về cách sử dụng CSS với điều khiển máy chủ, hãy xem Điều khiển máy chủ web ASP.NET và Kiểu CSS.

Hành vi và kiểu dáng của menu

Để kiểm soát sự xuất hiện của phần động của menu, bạn có thể sử dụng thuộc tính kiểu có từ "Động" trong tên:

Ví dụ sau đây tạo một bộ sưu tập gồm bốn kiểu áp dụng cho bốn cấp độ đầu tiên của các mục menu và có thể được tham chiếu trong biểu định kiểu bằng cách sử dụng giá trị.

Kiểu đầu tiên trong bộ sưu tập áp dụng cho các mục menu cấp một; kiểu thứ hai áp dụng cho các mục menu cấp hai, v.v. Lưu ý rằng không có sự kế thừa giữa các kiểu cấp độ nên các kiểu được áp dụng cho một cấp độ không ảnh hưởng đến các cấp độ tiếp theo.

Ví dụ sau đây tạo một bộ sưu tập gồm ba kiểu áp dụng cho ba cấp độ đầu tiên của các mục menu và có thể được tham chiếu trong một biểu định kiểu.