Làm cách nào để đặt biến CSS với JS?

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 thực sự là về việc sử dụng document.querySelector - chọn kiểu đã chỉ định, truy vấn biến và sau đó thay đổi giá trị dựa trên addEventListener

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;
}

<div class="main css-v-demo">
    <h2>This is the header for our demo.</h2>
    <p>This is some text.</p>
    <div>
        <p class="p">And some more text.</p>
    </div>
</div>
<div class="btn btn-css-v">Click me to change text color!</div>

<!-- We'll use the button to trigger the color change. -->

// 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ố style.setProperty. Điều này cho phép chúng tôi truy vấn trực tiếp biến trong đó dữ liệu biến được lưu trữ. Đáng lưu ý rằng phương pháp này hoạt động với bất kỳ thuộc tính/phần tử CSS nào, do đó không chỉ giới hạn ở các Biến CSS

Đâ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

Phương thức getComputingStyle() đưa ra một đối tượng bao gồm tất cả các kiểu được áp dụng cho phần tử đích. phương thức getPropertyValue() được sử dụng để lấy thuộc tính mong muốn từ các kiểu được tính toán. setProperty() dùng để thay đổi giá trị của biến CSS

Ví dụ

Các ví dụ sau minh họa cách chúng ta có thể lấy và đặt các biến CSS bằng JavaScript

Bản thử trực tiếp

đầu ra

Điều này sẽ tạo ra kết quả sau -

Ví dụ

Bản thử trực tiếp

đầu ra

Điều này sẽ tạo ra kết quả sau -

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 >

< button type="button" onclick="getfontfamily()">Get font family</button>

<button type="button" 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 chúng một số giá trị

:root {

--font-family. 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(--font-family);

font-size: 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');

hàm getfontfamily () {

var value = getComputedStyle(store);

alert("Initial font family: "+ giá trị. getPropertyValue('--font-family'));

}

function setfontfamily() {

store.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

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

Sau khi nhấp

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

Sau khi nhấn vào nút

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() để tìm nạp 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

Làm cách nào để đặt biến CSS trong JS?

Tôi có thể thay đổi biến CSS bằng JavaScript không?

Làm cách nào để chuyển giá trị từ js sang CSS?

Làm cách nào để thêm thuộc tính CSS trong JavaScript?