Lấy và đặt các biến CSS bằng JavaScript – Phương thức getComputedStyle () cung cấp một đối tượng bao gồm tất cả các kiểu được áp dụng cho phần tử đích. getProper …

Bạn đang xem: đặt biến css từ javascript

Lấy và đặt các biến CSS bằng JavaScript

Phương thức getComputedStyle () cung cấp 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 () được sử 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 trình diễn trực tiếp

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
:nguồn gốc {
--outerColor: đỏ tươi;
--innerColor: lightgreen;
text-align: center;
}
div {
ký quỹ: 5%;
đệm lót: 10%;
background-color: var (- innerColor);
border: 2px rãnh var (- externalColor);
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div onmouseover = "showColor ()" onmouseout = "changeColor ()" & gt;
& lt; p & gt; & lt; / p & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; script & gt;
let ele = document.querySelector (': root');
let para = document.querySelector ('p');
function showColor () {
let cs = getComputedStyle (ele);
para.textContent = ("Trước đây" + cs.getPropertyValue ('- innerColor') + "color");
}
function changeColor () {
let item = document.querySelector ('div');
item.style.setProperty ('- innerColor', 'magenta')
}
& lt; / script & gt;
& lt; / html & gt; 

Kết quả

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

Ví dụ

Demo trực tiếp

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
:nguồn gốc {
--customColor: xanh biển;
}
div {
ký quỹ: 5%;
chiều rộng: 130px;
chiều cao: 130px;
box-shadow: inset 0 0 38px var (- customColor);
bán kính biên giới: 50%;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div onmouseover = "toggle ()" & gt; & lt; / div & gt;
& lt; / body & gt;
& lt; script & gt;
let ele = document.querySelector (': root');
hàm toggle () {
let cs = getComputedStyle (ele);
let item = document.querySelector ('div');
if (cs.getPropertyValue ('- customColor')! == 'blue') {
item.style.setProperty ('- customColor', 'blue')
}
}
& lt; / script & gt;
& lt; / html & gt; 

Kết quả

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

Xem Thêm  Cách căn giữa mọi thứ bằng CSS - Căn chỉnh Div, Text, v.v. - căn chỉnh giữa css div

Quảng cáo


Xem thêm những thông tin liên quan đến chủ đề đặt biến css từ javascript

How to add CSS & Javascript to your HTML

alt

  • Tác giả: RichardCodes
  • Ngày đăng: 2020-05-23
  • Đánh giá: 4 ⭐ ( 2914 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, we create a starter template and link external CSS and Javascript files into our HTML file. We also look into what a CDN is and general boilerplate setup for a web development project.

    Github Starter Template Link: https://github.com/Middi/youtube-starter-template

    Instagram: https://instagram.com/richardcodes

    programming

DOM CSS: Thay đổi CSS bằng Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 4444 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu DOM CSS trong Javascript, cách thay đổi css bằng Javascript thông qua đối tượng DOM CSS.xem chi tiết hướng dẫn cách thay đổi css bằng js tại đây

Cách thức hoạt động của HTML, CSS và JavaScript

  • Tác giả: nordiccoder.com
  • Đánh giá: 5 ⭐ ( 1567 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn dùng biến trong CSS để làm dark/light mode

  • Tác giả: topdev.vn
  • Đánh giá: 5 ⭐ ( 1512 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách đây mười năm, nếu bạn hỏi có thể đặt biến trong CSS, câu trả lời là KHÔNG, cần viết bằng các ngôn ngữ như SCSS, LESS để có thể xài biến.

Thay đổi giá trị CSS bằng Javascript

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 5961 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Được rồi, có vẻ như bạn muốn thay đổi CSS chung để thay đổi hiệu quả…

Variable Javascript Là Gì Và Cách Sử Dụng Biến Trong Javascript

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 6554 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu cách khai bảo, sử dụng biến của ngôn ngữ lập trình Javascript trong trang web nhé.

DOM CSS trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 4439 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dựa vào hàm setAttribute trong bài trước thì chúng ta hoàn toàn có thể thêm css cho thẻ HTML, nhưng trong javascript còn hỗ trợ chúng ta một cách CSS chuyên nghiệp hơn nữa.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  PHP str - str thay thế trong php

By ads_php