Làm cách nào để hiển thị tiêu đề trong JavaScript?

Tiêu đề biểu đồ thường xuất hiện phía trên Khu vực lô chính và cung cấp mô tả ngắn gọn về biểu đồ. Đối tượng tiêu đề cung cấp các thuộc tính giúp thiết lập nội dung, hình thức và vị trí của tiêu đề biểu đồ

cú pháp

Tiêu đề biểu đồ được sử dụng để mô tả biểu đồ

var  chart =  new  CanvasJS.Chart["container",
{
 .
 .
 title:{
     text: "Chart Title"
    // more attributes 
 },
 .
 . 
}];
chart.render[];

Tạo tiêu đề cơ bản

Thuộc tính tiêu đề quan trọng nhất là văn bản. Bất kỳ văn bản nào cũng có thể được thêm vào Tiêu đề của Biểu đồ bằng thuộc tính này.
Trong ví dụ sau, chúng ta có một đối tượng tiêu đề với thuộc tính văn bản đơn giản.

Tự mình thử bằng cách Chỉnh sửa mã bên dưới

Tạo kiểu cho tiêu đề của chúng tôi

Có một số thuộc tính chúng ta có thể đặt bên trong đối tượng tiêu đề và tạo kiểu cho nó theo cách chúng ta muốn. Bảng dưới đây liệt kê một số thuộc tính kiểu dáng

Tự mình thử bằng cách Chỉnh sửa mã bên dưới

Căn chỉnh tiêu đề

Tiêu đề có thể được định vị ở 9 vị trí khác nhau bằng cách kết hợp các thuộc tính verticalAlign và verticalAlign. Dưới đây là bảng hiển thị các kết hợp khác nhau

OptionshorizontalAlignverticalAlign1lefttop2leftcenter3leftbottom4centertop5centercenter6centerbottom7righttop8rightcenter9rightbottom

Bạn có thể thử tất cả các kết hợp dưới đây

Tự mình thử bằng cách Chỉnh sửa mã bên dưới

kết thúc nó lên

Kết hợp tất cả các thuộc tính Tiêu đề có thể tạo ra một tiêu đề đẹp. Đội mũ nghệ thuật của bạn và đưa ra phong cách của riêng bạn

Tiêu đề biểu đồ xác định văn bản để vẽ ở đầu biểu đồ

Cấu hình tiêu đề

không gian tên.

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9, các tùy chọn chung cho tiêu đề biểu đồ được xác định trong

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

NameTypeDefaultScriptableDescription

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

1

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

2

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

3YesAlignment of the title. hơn.

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

5

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6CóMàu văn bản.

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

7

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

8_______400Có Tiêu đề có hiển thị không?

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

01

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

8

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

03CóĐánh dấu rằng hộp này phải chiếm toàn bộ chiều rộng/chiều cao của canvas. Nếu

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

00, hộp có kích thước và được đặt bên trên/bên cạnh khu vực hải đồ.

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

05

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

2

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

07YesPosition of title. hơn.

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

08

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

09

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

10CóXem Phông chữ

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

11

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

12

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

13CóPhần đệm để áp dụng xung quanh tiêu đề. Chỉ

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

14 và

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

15 được triển khai.

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

16____42.

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

18

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

19YesTiêu đề văn bản để hiển thị. Nếu được chỉ định dưới dạng một mảng, văn bản được hiển thị trên nhiều dòng

Ghi chú

Nếu bạn cần nhiều tùy chỉnh trực quan hơn, bạn có thể triển khai tiêu đề bằng HTML và CSS

Chức vụ

Giá trị vị trí tiêu đề có thể là

• newPageTitle = 'The title has changed!';
  document.querySelector['title'].textContent = newPageTitle;

  07

• newPageTitle = 'The title has changed!';
  document.querySelector['title'].textContent = newPageTitle;

  21

• newPageTitle = 'The title has changed!';
  document.querySelector['title'].textContent = newPageTitle;

  22

• newPageTitle = 'The title has changed!';
  document.querySelector['title'].textContent = newPageTitle;

  23

Căn chỉnh

Căn chỉnh tiêu đề. Tùy chọn là

Ví dụ sử dụng

Ví dụ bên dưới sẽ bật tiêu đề 'Tiêu đề biểu đồ tùy chỉnh' trên biểu đồ được tạo

Ví dụ này cho thấy cách chỉ định phần đệm văn bản tiêu đề trên cùng và dưới cùng riêng biệt

Đưa ra một trang web chứa tiêu đề trang và nhiệm vụ là thay đổi tiêu đề của trang web một cách linh hoạt bằng JavaScript.  

Phương pháp 1. Sử dụng tài liệu JavaScript. tài sản tiêu đề

Thuộc tính này được sử dụng để đặt hoặc trả về tiêu đề hiện tại của tài liệu. Tiêu đề của trang có thể được thay đổi bằng cách gán tiêu đề mới dưới dạng chuỗi cho thuộc tính này. Điều này sẽ thay đổi tiêu đề của trang web thành tiêu đề ưa thích.  

cú pháp.  

newPageTitle = 'The title has changed!';
document.title = newPageTitle;

Thí dụ.  

html

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

3

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

5

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

7

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9____76

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

2

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

5

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

7

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

2

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

7

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

37____76

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0______74

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

41

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

42

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

43

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

44

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

47

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9____741

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

52

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

55

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

5

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

7

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9____755

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

52

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

68

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

71

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

73

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9____768

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

52

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0______74

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

41

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

42

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

43

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

44

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

47

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9____741

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

52

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0______74

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

95

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

96

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

43

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

98

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

61

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

62

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

63

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

62

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

65

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

4

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

67

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

0

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

95

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

37____76

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

7

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

9

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

5

newPageTitle = 'The title has changed!';
document.querySelector['title'].textContent = newPageTitle;

6

đầu ra

 

Phương pháp 2. Sử dụng Phương thức DOM querySelector[]

Phương pháp này được sử dụng để chọn các thành phần trong tài liệu. Có thể chọn phần tử tiêu đề bằng cách chỉ định phần tử tiêu đề trong bộ chọn làm tham số. Điều này sẽ trả về phần tử tiêu đề hiện tại của trang. Thuộc tính textContent của một phần tử trả về nội dung văn bản của một nút cụ thể. Tiêu đề của trang có thể được thay đổi bằng cách gán tiêu đề mới được yêu cầu dưới dạng chuỗi cho thuộc tính textContent. Điều này sẽ thay đổi tiêu đề của trang web thành tiêu đề ưa thích.  

Làm cách nào để thêm tiêu đề trong JavaScript?

Bạn có thể hiển thị văn bản bằng JavaScript không?

Tiêu đề trong JavaScript là gì?

Làm cách nào để lấy tiêu đề nút trong JavaScript?