Các biến CSS gần như là tiêu chuẩn vàng trong việc xây dựng các thiết kế từ đầu, điều này đã được khuếch đại hơn nữa bằng cách tích hợp các biến như một phần của các thư viện và khung CSS phổ biến
Vì vậy, đoạn mã sau đây thực sự là về việc sử dụng
function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`CSSHTMLJavaScript
/* creating a style declaration, and defining a custom variable */
:root {
--demo-color-change: #0b32e7;
}
/* using the custom variable to style our */
.css-v-demo p {
color: var[--demo-color-change];
}
.css-v-demo .btn-css-v {
text-align: center;
padding: 8px;
color: #fff;
width: 100px;
}
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Mảnh ghép cuối cùng là tuyên bố
function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`Đây là tiêu đề cho bản demo của chúng tôi
Đây là một số văn bản
Và một số văn bản khác
Nhấp vào tôi để thay đổi màu văn bản
Phương pháp này sau đó có thể được thực hiện trong một số lượng lớn các trường hợp sử dụng. Ví dụ: bạn có thể tạo một tiện ích tùy chỉnh để cho phép người dùng thay đổi kích thước phông chữ của nội dung cơ thể của bạn. Ngoài ra, phương pháp này có thể được sử dụng để áp dụng các bộ lọc khác nhau cho hình ảnh và cho phép người dùng xem trước các kết quả khác nhau
Tôi muốn thay đổi một biến trong hộp kiểm khiến câu lệnh if tính toán mà không cần tải lại trang, nhưng tôi đang gặp khó khăn.. vẫn đang học, xin lỗi
Đây là mã có liên quan
var lettuce = false;
Lettuce
if [lettuce == true] {
document.write["45"];
}
Cảm ơn
Giải pháp tốt nhất
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
Đầu tiên, bạn muốn sự kiện
function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`Giải pháp liên quan
Javascript – Cách đóng JavaScript hoạt động
Một đóng cửa là một cặp của
- Một chức năng, và
- Tham chiếu đến phạm vi bên ngoài của hàm đó [môi trường từ vựng]
Môi trường từ vựng là một phần của mọi ngữ cảnh thực thi [khung ngăn xếp] và là bản đồ giữa các mã định danh [nghĩa là. tên biến cục bộ] và giá trị
Mỗi chức năng trong JavaScript duy trì một tham chiếu đến môi trường từ vựng bên ngoài của nó. Tham chiếu này được sử dụng để định cấu hình ngữ cảnh thực thi được tạo khi một hàm được gọi. Tham chiếu này cho phép mã bên trong hàm "nhìn thấy" các biến được khai báo bên ngoài hàm, bất kể khi nào và ở đâu hàm được gọi
Nếu một chức năng được gọi bởi một chức năng, đến lượt nó được gọi bởi một chức năng khác, thì một chuỗi tham chiếu đến môi trường từ vựng bên ngoài được tạo. Chuỗi này được gọi là chuỗi phạm vi
Trong đoạn mã sau,
function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`Nói cách khác. trong JavaScript, các hàm mang tham chiếu đến một "hộp trạng thái" riêng tư mà chỉ chúng [và bất kỳ hàm nào khác được khai báo trong cùng một môi trường từ vựng] mới có quyền truy cập. Hộp trạng thái này là vô hình đối với người gọi hàm, cung cấp một cơ chế tuyệt vời để ẩn và đóng gói dữ liệu
Và hãy nhớ. các hàm trong JavaScript có thể được truyền xung quanh giống như các biến [hàm hạng nhất], nghĩa là các cặp chức năng và trạng thái này có thể được truyền xung quanh chương trình của bạn. tương tự như cách bạn có thể truyền một thể hiện của một lớp xung quanh trong C++
Nếu JavaScript không có bao đóng, thì sẽ phải chuyển nhiều trạng thái hơn giữa các hàm một cách rõ ràng, làm cho danh sách tham số dài hơn và mã ồn hơn
Vì vậy, nếu bạn muốn một chức năng luôn có quyền truy cập vào một phần trạng thái riêng tư, bạn có thể sử dụng bao đóng
và chúng ta thường muốn liên kết trạng thái với một chức năng. Ví dụ, trong Java hoặc C++, khi bạn thêm một biến thể hiện riêng và một phương thức vào một lớp, bạn đang liên kết trạng thái với chức năng
Trong C và hầu hết các ngôn ngữ phổ biến khác, sau khi hàm trả về, tất cả các biến cục bộ không còn truy cập được nữa do khung ngăn xếp bị hủy. Trong JavaScript, nếu bạn khai báo một hàm bên trong một hàm khác, thì các biến cục bộ của hàm bên ngoài vẫn có thể truy cập được sau khi trở về từ hàm đó. Bằng cách này, trong đoạn mã trên,
function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`Công dụng của Đóng cửa
Các bao đóng hữu ích bất cứ khi nào bạn cần một trạng thái riêng tư được liên kết với một chức năng. Đây là một kịch bản rất phổ biến - và hãy nhớ. JavaScript không có cú pháp lớp cho đến năm 2015 và nó vẫn không có cú pháp trường riêng. Đóng cửa đáp ứng nhu cầu này
Biến thể hiện cá nhân
Trong đoạn mã sau, hàm
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
Lập trình chức năng
Trong đoạn mã sau, hàm
function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Lập trình hướng sự kiện
Trong đoạn mã sau, hàm
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];mô đun hóa
Trong ví dụ sau, tất cả các chi tiết triển khai được ẩn bên trong một biểu thức hàm được thực thi ngay lập tức. Các chức năng
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
This is the header for our demo.
This is some text.
And some more text.
Click me to change text color!
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];ví dụ
ví dụ 1
Ví dụ này cho thấy các biến cục bộ không được sao chép trong bao đóng. việc đóng cửa duy trì một tham chiếu đến chính các biến ban đầu. Như thể khung ngăn xếp vẫn tồn tại trong bộ nhớ ngay cả sau khi chức năng bên ngoài thoát
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];ví dụ 2
Trong đoạn mã sau, ba phương thức
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Và mỗi khi
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];
var lettuce = false;
Lettuce
if [lettuce == true] {
document.write["45"];
}
ví dụ 3
Nếu bạn đang sử dụng các biến được khai báo bằng cách sử dụng
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Trong đoạn mã sau, mỗi lần lặp lại, một hàm mới
function foo[] {
const secret = Math.trunc[Math.random[]*100]
return function inner[] {
console.log[`The secret number is ${secret}.`]
}
}
const f = foo[] // `secret` is not directly accessible from outside `foo`
f[] // The only way to retrieve `secret`, is to invoke `f`// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}]; Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
điểm cuối cùng
- Bất cứ khi nào một hàm được khai báo trong JavaScript, bao đóng được tạo
- Trả về một
34 từ bên trong một hàm khác là ví dụ cổ điển về đóng, bởi vì trạng thái bên trong hàm bên ngoài hoàn toàn có sẵn cho hàm bên trong được trả về, ngay cả sau khi hàm bên ngoài đã hoàn thành thực thi// selecting the :root theme const root_theme = document.querySelector[':root']; // seleting the button which will trigger the event const root_btn = document.querySelector['.btn-css-v']; // the event listener to change the text color upon 'click' root_btn.addEventListener['click', [] => { // changing the color from #0b32e7 to #f44336 root_theme.style.setProperty['--demo-color-change', '#f44336']; }]; - Bất cứ khi nào bạn sử dụng
35 bên trong một chức năng, thì bao đóng được sử dụng. Văn bản mà bạn// selecting the :root theme const root_theme = document.querySelector[':root']; // seleting the button which will trigger the event const root_btn = document.querySelector['.btn-css-v']; // the event listener to change the text color upon 'click' root_btn.addEventListener['click', [] => { // changing the color from #0b32e7 to #f44336 root_theme.style.setProperty['--demo-color-change', '#f44336']; }];
36 có thể tham chiếu đến các biến cục bộ của hàm và ở chế độ không nghiêm ngặt, bạn thậm chí có thể tạo các biến cục bộ mới bằng cách sử dụng// selecting the :root theme const root_theme = document.querySelector[':root']; // seleting the button which will trigger the event const root_btn = document.querySelector['.btn-css-v']; // the event listener to change the text color upon 'click' root_btn.addEventListener['click', [] => { // changing the color from #0b32e7 to #f44336 root_theme.style.setProperty['--demo-color-change', '#f44336']; }];
37// selecting the :root theme const root_theme = document.querySelector[':root']; // seleting the button which will trigger the event const root_btn = document.querySelector['.btn-css-v']; // the event listener to change the text color upon 'click' root_btn.addEventListener['click', [] => { // changing the color from #0b32e7 to #f44336 root_theme.style.setProperty['--demo-color-change', '#f44336']; }]; - Khi bạn sử dụng
38 [Hàm tạo chức năng] bên trong một hàm, nó sẽ không đóng trên môi trường từ vựng của nó. thay vào đó, nó đóng trên bối cảnh toàn cầu. Hàm mới không thể tham chiếu các biến cục bộ của hàm bên ngoài// selecting the :root theme const root_theme = document.querySelector[':root']; // seleting the button which will trigger the event const root_btn = document.querySelector['.btn-css-v']; // the event listener to change the text color upon 'click' root_btn.addEventListener['click', [] => { // changing the color from #0b32e7 to #f44336 root_theme.style.setProperty['--demo-color-change', '#f44336']; }]; - Một bao đóng trong JavaScript giống như giữ một tham chiếu [KHÔNG phải là một bản sao] đến phạm vi tại điểm khai báo hàm, từ đó giữ một tham chiếu đến phạm vi bên ngoài của nó, v.v., đến tận đối tượng chung ở đầu
- Một bao đóng được tạo khi một hàm được khai báo;
- Một tập hợp các biến cục bộ mới được tạo mỗi khi một hàm được gọi
liên kết
- Các thuộc tính riêng tư mô phỏng của Douglas Crockford và các phương thức riêng tư cho một đối tượng, sử dụng các bao đóng
- Một lời giải thích tuyệt vời về cách đóng cửa có thể gây rò rỉ bộ nhớ trong IE nếu bạn không cẩn thận
- Tài liệu MDN về Đóng JavaScript
Javascript – Cách thay đổi lớp của phần tử bằng JavaScript
Kỹ thuật HTML5 hiện đại để thay đổi lớp
Các trình duyệt hiện đại đã thêm classList cung cấp các phương thức giúp thao tác với các lớp dễ dàng hơn mà không cần thư viện
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
Thật không may, những thứ này không hoạt động trong Internet Explorer trước v10, mặc dù có một miếng đệm để thêm hỗ trợ cho IE8 và IE9, có sẵn từ trang này. Tuy nhiên, nó ngày càng nhiều
Giải pháp đa trình duyệt đơn giản
Cách JavaScript tiêu chuẩn để chọn một phần tử là sử dụng
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Để thay đổi tất cả các lớp cho một phần tử
Để thay thế tất cả các lớp hiện có bằng một hoặc nhiều lớp mới, hãy đặt thuộc tính className
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
[Bạn có thể sử dụng danh sách được phân cách bằng dấu cách để áp dụng nhiều lớp. ]
Để thêm một lớp bổ sung vào một phần tử
Để thêm một lớp vào một phần tử mà không xóa/ảnh hưởng đến các giá trị hiện có, hãy thêm một khoảng trắng và tên lớp mới, như vậy
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
Để xóa một lớp khỏi một phần tử
Để xóa một lớp đơn lẻ thành một phần tử mà không ảnh hưởng đến các lớp tiềm năng khác, cần phải thay thế biểu thức chính quy đơn giản
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
Một lời giải thích của regex này là như sau
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
Cờ
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Để kiểm tra xem một lớp đã được áp dụng cho một phần tử chưa
Biểu thức chính được sử dụng ở trên để xóa một lớp cũng có thể được sử dụng để kiểm tra xem một lớp cụ thể có tồn tại hay không
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
### Chỉ định những hành động này cho sự kiện title.
Mặc dù có thể viết JavaScript trực tiếp bên trong các thuộc tính sự kiện HTML [chẳng hạn như
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Bước đầu tiên để đạt được điều này là tạo một hàm và gọi hàm đó trong thuộc tính title chẳng hạn
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
[Không bắt buộc phải có mã này trong thẻ tập lệnh, đây chỉ đơn giản là ví dụ ngắn gọn và bao gồm JavaScript trong một tệp riêng biệt có thể phù hợp hơn. ]
Bước thứ hai là di chuyển sự kiện title ra khỏi HTML và chuyển sang JavaScript, chẳng hạn như sử dụng addEventListener
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
[Lưu ý rằng cửa sổ. phần onload là bắt buộc để nội dung của hàm đó được thực thi sau khi HTML tải xong - nếu không có phần này, MyElement có thể không tồn tại khi mã JavaScript được gọi, do đó dòng đó sẽ bị lỗi. ]
Thư viện và khung JavaScript
Đoạn mã trên đều ở dạng JavaScript chuẩn, tuy nhiên, thông thường người ta sử dụng khung hoặc thư viện để đơn giản hóa các tác vụ thông thường, cũng như hưởng lợi từ các lỗi đã sửa và các trường hợp cạnh mà bạn có thể không nghĩ đến khi viết mã của mình
Mặc dù một số người cho rằng việc thêm khung ~50 KB chỉ để thay đổi một lớp là quá mức cần thiết, nhưng nếu bạn đang thực hiện bất kỳ khối lượng đáng kể nào đối với JavaScript hoặc bất kỳ thứ gì có thể có hành vi bất thường trên nhiều trình duyệt, thì bạn nên cân nhắc
[Đại khái, thư viện là một bộ công cụ được thiết kế cho một nhiệm vụ cụ thể, trong khi một khung thường chứa nhiều thư viện và thực hiện một bộ nhiệm vụ hoàn chỉnh. ]
Các ví dụ trên đã được sao chép bên dưới bằng cách sử dụng jQuery, có lẽ là thư viện JavaScript được sử dụng phổ biến nhất [mặc dù cũng có những ví dụ khác đáng để nghiên cứu]
[Lưu ý rằng
// selecting the :root theme
const root_theme = document.querySelector[':root'];
// seleting the button which will trigger the event
const root_btn = document.querySelector['.btn-css-v'];
// the event listener to change the text color upon 'click'
root_btn.addEventListener['click', [] => {
// changing the color from #0b32e7 to #f44336
root_theme.style.setProperty['--demo-color-change', '#f44336'];
}];Thay đổi lớp học với jQuery
Lettuce
function recompute[]
if [lettuce == true] {
document.write["45"];
}
}
Ngoài ra, jQuery cung cấp lối tắt để thêm một lớp nếu nó không áp dụng hoặc xóa một lớp không áp dụng.