log()

Cú pháp

/* A <number> value */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */

Tham số

Hàm log(value [, base]?) nhận hai giá trị phân cách bằng dấu phẩy làm tham số.

value

Một phép tính giải thành <number> lớn hơn hoặc bằng 0. Biểu diễn giá trị cần lấy logarithm.

base

Tùy chọn. Một phép tính giải thành <number> lớn hơn hoặc bằng 0. Biểu diễn cơ số của logarithm. Nếu không được định nghĩa, cơ số logarithm mặc định e được sử dụng.

Giá trị trả về

Logarithm của value, khi base được định nghĩa.

Logarithm tự nhiên (cơ số e) của value, khi base không được định nghĩa.

Cú pháp hình thức

<log()> = 
  log( <calc-sum> , <calc-sum>? )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Ví dụ

Sử dụng hàm log() trên thang logarithm

Ví dụ này minh họa cách hàm log() có thể được dùng để trực quan hóa các giá trị dữ liệu bằng cách sử dụng thang logarithm. Chiều rộng của mỗi thanh trong ví dụ này tương đối với giá trị dữ liệu của nó trên thang logarithm cơ số 10. Trên mỗi phần tử, giá trị của nó được gán cho một thuộc tính tùy chỉnh CSS có tên --value, sau đó được dùng bởi lớp .bar để tính toán chiều rộng của nó.

HTML

<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>

CSS

.bar {
  width: calc(log(var(--value), 10) * 2em);
}

.bar {
  height: 2em;
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25em 0;
}

Kết quả

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• pow()
• sqrt()
• hypot()
• exp()