Kết hợp calc() với attr() trong CSS

tôi đã tự hỏi liệu tôi có thể kết hợp các calc() chức năng với attr() chức năng để đạt được một cái gì đó như sau:Kết hợp calc() với attr() trong CSS

<div class="content" data-x="1"> 
    This box should have a width of 100px 
</div> 

<div class="content" data-x="2"> 
    This box should have a width of 200px 
</div> 

<div class="content" data-x="3"> 
    This box should have a width of 300px 
</div>

CSS

.content{ 
    //Fallback. If no calc is supported, just leave it at 100px 
    width: 100px; 
} 


.content[data-x]{ 
    // Multiply the width of the element by the factor of data-x 
    width: calc(100px * attr(data-x)); 
}

draft nói rằng nó sẽ hoạt động, nhưng trong trường hợp của tôi (Chrome 31.0.1650.63 m và Firefox 25.0.1) thì không. Có hai trường hợp sau đó:

tôi đã làm nó sai
Nó chưa được hỗ trợ

Whats thỏa thuận này?

Example Fiddle

Nguồn

2013-12-10 Loupax

Ngay bây giờ attr() không được hỗ trợ theo mặc định trong bất kỳ trình duyệt lớn đối với bất kỳ các thuộc tính khác sau đó "nội dung". Đọc thêm về nó ở đây: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Nguồn

2013-12-10 09:42:53 jede

Dưới đây là một ví dụ với "nội dung": http://jsfiddle.net/cQ8F4/2/ – randak

Có không được hỗ trợ. Bạn có thể làm nó không năng động với css như thế này: http://jsfiddle.net/cQ8F4/3/ Đối với các giải pháp năng động, tôi sẽ sử dụng javascript hoặc jQuery: http://jsfiddle.net/cQ8F4/4/ – nkmol

Có dường như là một con đường xung quanh nó using vars

.content{ 
    --x: 1; 
    width: calc(100px * var(--x)); 
    background: #f00; 
} 

[data-x="1"] { --x: 1; } 
[data-x="2"] { --x: 2; } 
[data-x="3"] { --x: 3; } 

/*doesn't look like this works unfortunately 
[data-x] { --x: attr(data-x); } 
seems to set all the widths to some really large number*/

Phần nhận xét ra có thể đã được hoàn hảo, và điều này có thể là lý do rất giống ý tưởng của bạn không làm việc , nhưng có vẻ như css không thực hiện phép đúc tự động đẹp mà bạn có thể sử dụng trong javascript ('2' * 3 //=6).
attr() trả về một chuỗi chứ không phải số và điều này có thể được nhìn thấy bằng cách thêm .content:after { content:var(--x) }; không có gì được in, --x là một số, content chấp nhận chuỗi.

Nếu có một số chức năng css để truyền, tôi cảm thấy như đó sẽ là chìa khóa cho vấn đề này.

Nguồn

2016-11-26 07:04:31 Hashbrown

Điều này là khá tuyệt vời, ngay cả khi không có sự hỗ trợ attr()! Nó có thể cho phép định nghĩa của một số bố trí thực sự tốt đẹp! – Loupax

FYI, IE không hỗ trợ các biến CSS, và Edge đang dần tiến tới đó. Hầu hết các trình duyệt khác đều hỗ trợ chúng! http://caniuse.com/#feat=css-variables – eppsilon

Hiện tại, chức năng attr() không hoạt động trong Chrome.

Một giải pháp gần như là tốt đẹp là sử dụng các biến CSS:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     :root { 
     --module-size: 100px; 
     --data-x:1; /* Default value */ 
     } 

     .content{ 
      width: calc(var(--module-size) * var(--data-x)); 
      border: 1px solid; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="content" style="--data-x:1"> 
     This box should have a width of 100px 
    </div> 

    <div class="content" style="--data-x:2"> 
     This box should have a width of 200px 
    </div> 

    <div class="content" style="--data-x:3"> 
     This box should have a width of 300px 
    </div> 
    </body> 
</html>

Nguồn

2017-01-31 14:00:26

Kết hợp calc() với attr() trong CSS

Trả lời

Các vấn đề liên quan