CSS gốc js

Tuy nhiên, đôi khi trong một số tình huống nhất định, chẳng hạn như khi thiết kế trang web đáp ứng hoặc tìm nạp một số dữ liệu nhất định từ cơ sở dữ liệu, bạn sẽ yêu cầu tìm nạp hoặc cập nhật giá trị của một số biến CSS nhất định. Do đó, điều này có thể được thực hiện bằng cách sử dụng phương thức JavaScript getComputingStyle() và phương thức setProperty()

Dưới đây chúng tôi đã trình bày với sự trợ giúp của một ví dụ về cách thay đổi các biến CSS bằng JavaScript

Cách thay đổi các biến CSS thông qua JavaScript

Với mục đích hiểu cách thay đổi biến CSS bằng JavaScript, hãy xem xét một ví dụ

HTML

< p > Đây là một đoạn văn. < /p >

< nút loại="nút" onclick="getfontfamily()">Get font family</button>

< nút loại="nút" onclick="setfontfamily()">Set font family</button>

We are creating a

element to apply some styling to it using CSS variables and then creating two buttons to get and set CSS variables using JavaScript.

CSS

Bây giờ, trước hết, chúng ta đang tạo một số biến toàn cục trong. bộ chọn gốc và cung cấp cho họ một số giá trị

:gốc {

--họ phông chữ. Times New Roman ;

--cỡ chữ. 30px;

}

Bây giờ để sử dụng các biến này trên đoạn văn, hãy làm theo đoạn mã dưới đây

p {

màu. nâu;


họ phông chữ. var(--họ phông chữ);

cỡ chữ. var(--cỡ chữ);

}

Trong đoạn mã trên, chúng tôi đang cung cấp cho đoạn văn một số màu và sử dụng hàm var(), chúng tôi đang truy cập các biến CSS của mình để cung cấp họ phông chữ và kích thước phông chữ cho đoạn văn

Bây giờ, chúng tôi muốn cập nhật giá trị của các biến CSS bằng JavaScript. Đây là cách bạn làm điều đó. Trong mã bên dưới, về cơ bản, chúng tôi đang tìm nạp cũng như cập nhật giá trị của biến –font-family

JS

var store = . Bộ chọn truy vấn('. root');

function getfontfamily () {

var value = getComputedStyle ( store );

alert ("Họ phông chữ ban đầu. "+ giá trị. getPropertyValue('--font-family'));

}

function setfontfamily () {

cửa hàng. kiểu dáng . setProperty('--font-family' , 'Verdana');

}

Trong đoạn mã trên, chúng tôi đang tạo một biến có tên “store” để lưu trữ tất cả các biến CSS được khai báo trong. bộ chọn gốc bằng phương thức querySelector()

Sau đó, chúng tôi sẽ tạo một hàm “getfontfamily” để tìm nạp các biến ban đầu được lưu trong biến “store” bằng cách sử dụng phương thức getComputingStyle() và sau đó chúng tôi sẽ sử dụng hàm alert() để hiển thị giá trị ban đầu của biến tương ứng với

Cuối cùng, chúng ta lại tạo một hàm khác “setfontfamily()” để thiết lập giá trị mới của biến –font-family sử dụng phương thức setProperty()

đầu ra

Đây là giao diện ban đầu của trang web của chúng tôi

CSS gốc js

Nhấp vào nút nhận để lấy giá trị của họ phông chữ gốc

CSS gốc js

Sau khi nhấp

CSS gốc js

Họ phông chữ ban đầu là Times New Roman

Để cập nhật họ phông chữ, nhấp vào nút đặt

CSS gốc js

Sau khi nhấn vào nút

CSS gốc js

Biến –font-family đã được cập nhật thành công thành “Verdana”

Phần kết luận

Với mục đích tìm nạp hoặc cập nhật giá trị của một số biến CSS nhất định thông qua JavaScript, có hai phương thức khả dụng. Đầu tiên là phương thức getComputingStyle() để lấy giá trị của một biến, trong khi đó, để cập nhật giá trị của một biến bằng phương thức setProperty(). Thay đổi các biến CSS thông qua JavaScript rất hữu ích trong các tình huống chẳng hạn như khi thiết kế trang web phản hồi hoặc tìm nạp một số dữ liệu nhất định từ cơ sở dữ liệu. Hướng dẫn này thảo luận về cách thay đổi các biến này thông qua JavaScript với sự trợ giúp của một ví dụ phù hợp

Gốc {} trong CSS là gì?

Các. lớp giả CSS gốc khớp với phần tử gốc của cây đại diện cho tài liệu . Trong HTML,. root đại diện cho phần tử

Làm cách nào để lấy giá trị biến CSS gốc trong JavaScript?

Bạn có thể lấy giá trị của biến CSS (còn gọi là thuộc tính tùy chỉnh CSS) qua JavaScript theo cách sau. .
Nhận các kiểu được tính toán bằng phương thức getComputedStyle() và;
Sử dụng phương thức getPropertyValue() để lấy giá trị của một biến CSS

Khi nào nên sử dụng CSS gốc?

Nhắm mục tiêu phần tử gốc . Đây là nơi. phần tử gốc xuất hiện, cho phép bạn tạo kiểu cho phần tử gốc của tài liệu. Điều này có thể đặc biệt quan trọng khi tạo kiểu tài liệu SVG, nơi bộ chọn html sẽ không hoạt động. to style other types of documents, apart from HTML. This is where the :root element comes in to play, allowing you to style the root element of a document. This can be especially important when styling SVG documents, where the html selector will not work.

Làm cách nào để đặt màu trong CSS gốc?

Giống như bất kỳ thuộc tính nào khác, thuộc tính này được viết bên trong bộ quy tắc, như vậy. .
phần tử { --main-bg-color. nâu;
gốc { --main-bg-color. nâu;
phần tử { màu nền. var(--main-bg-color);