Truy cập thuộc tính tùy chỉnh CSS (còn gọi là biến CSS) thông qua JavaScript

Làm cách nào để nhận và đặt thuộc tính tùy chỉnh CSS (các truy cập có var(…) trong biểu định kiểu) bằng JavaScript (plain hoặc jQuery)?Truy cập thuộc tính tùy chỉnh CSS (còn gọi là biến CSS) thông qua JavaScript

Đây là thử không thành công của tôi: nhấp vào các nút thay đổi thường font-weight tài sản, nhưng không phải là tùy chỉnh --mycolor tài sản:

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <style> 
    body { 
     --mycolor: yellow; 
     background-color: var(--mycolor); 
    } 
    </style> 
</head> 
<body> 

    <p>Let's try to make this text bold and the background red.</p> 
    <button onclick="plain_js()">Plain JS</button> 
    <button onclick="jQuery_()">jQuery</button> 

    <script> 
    function plain_js() { 
    document.body.style['font-weight'] = 'bold'; 
    document.body.style['--mycolor'] = 'red'; 
    }; 
    function jQuery_() { 
    $('body').css('font-weight', 'bold'); 
    $('body').css('--mycolor', 'red'); 
    } 
    </script> 
</body> 
</html>

Nguồn

2016-03-18 MarcZ

Có 'var' được hỗ trợ trong CSS không? –

@Gothdo Đúng vậy. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Nó vẫn là thử nghiệm tuy nhiên. Ngoài ra nó là mục đích không có nghĩa là cho những thứ mà bạn thay đổi vào thời gian chạy nhưng để bảo trì. Nếu bạn muốn những thứ bạn có thể thay đổi, hãy xem [attr] (https://developer.mozilla.org/en/docs/Web/CSS/attr) – ste2425

Biến CSS là một tính năng thử nghiệm ... Tôi không mong đợi họ sẽ có thể truy cập được qua JS. Tôi có thể sai ... Nhưng tại sao không chỉ sử dụng FireBug và mong đợi các yếu tố DOM, để tìm ra chính mình? – Connum

Bạn có thể sử dụng document.body.style.setProperty('--name', value);:

var bodyStyles = window.getComputedStyle(document.body); 
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get 

document.body.style.setProperty('--foo-bar', newValue);//set

biết thêm thông tin here.

Nguồn

2016-03-18 15:56:13 CMedina

Bộ này cũng cập nhật tất cả các tham chiếu đến biến đó trong CSS thành? – ste2425

Nó có thể được sử dụng như một biến toàn cầu có thể thay đổi mà không cần tải một tệp mới CSS – CMedina

Đối với bất kỳ ai muốn nhận hoặc đặt thuộc tính trên '' -tag thay vì nội dung: Bạn có thể truy cập nó bằng 'document.documentElement '. – thutt

Ví dụ sau minh họa cách người ta có thể thay đổi nền bằng JavaScript hoặc jQuery, tận dụng lợi thế của các thuộc tính CSS tùy chỉnh cũng được biết đến dưới dạng biến CSS (đọc thêm here). Tiền thưởng: mã cũng chỉ ra cách người ta có thể sử dụng biến CSS để thay đổi màu phông chữ.

function plain_js() { 
 
    // need DOM to set --mycolor to a different color 
 
    d.body.style.setProperty('--mycolor', 'red'); 
 
     
 
    // get the CSS variable ... 
 
    bodyStyles = window.getComputedStyle(document.body); 
 
    fontcolor = bodyStyles.getPropertyValue('--font-color'); //get 
 
    
 
    // ... reset body element to custom property's new value 
 
    d.body.style.color = fontcolor; 
 
    d.g("para").style["font-weight"] = "bold"; 
 
    this.style.display="none"; 
 
    }; 
 

 
    function jQuery_() { 
 
    $("body").get(0).style.setProperty('--mycolor','#f3f'); 
 
    $("body").css("color",fontcolor); 
 
    $("#para").css("fontWeight","bold"); 
 
    $(this).css("display","none"); 
 
    } 
 
    
 
var bodyStyles = null; 
 
var fontcolor = ""; 
 
var d = document; 
 

 
d.g = d.getElementById; 
 
d.g("red").addEventListener("click",plain_js); 
 
d.g("pink").addEventListener("click",jQuery_);

:root { 
 
    --font-color:white; 
 
    --mycolor:yellow; 
 
    } 
 
    body { 
 
     background-color: var(--mycolor); 
 
     color:#090; 
 
    } 
 
    
 
    #para { 
 
    font: 90% Arial,Helvetica; 
 
    font-weight:normal; 
 
    } 
 
    
 
    #red { 
 
     background:red; 
 
    } 
 
    
 
    #pink { 
 
     background:#f3f; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<p id="para">Let's try to make the background red or pink and change the text to white and bold.</p> 
 
    <button id="red">Red</button> 
 
    <button id="pink">Pink</button>

Lưu ý rằng với jQuery, để thiết lập thuộc tính tùy chỉnh đến một giá trị differnt, response này thực sự nắm giữ câu trả lời. Nó sử dụng phương thức get() của phần tử cơ thể cho phép truy cập vào cấu trúc DOM cơ bản và trả về phần tử cơ thể, do đó tạo điều kiện cho mã thiết lập thuộc tính tùy chỉnh --mycolor thành một giá trị mới.

Nguồn

2017-06-22 11:31:22 slevy1

Truy cập thuộc tính tùy chỉnh CSS (còn gọi là biến CSS) thông qua JavaScript

Trả lời

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