问使用javascript，如何通过onclick让CSS变量覆盖粘滞？

EN

body {

    --bg-color-home: rgba(221, 230, 237, .85);
    --bg-image-home: url(../images/bg_peak.jpg);

    --bg-color-about: rgba(223, 238, 243, 1);
    --bg-image-about: url(../images/bg_about.jpg);

    --bg-color: var(--bg-color-home);
    --bg-image: var(--bg-image-home);    
}

<a href="template.xhtml?page=about" data-value="about" class="nav-link">About</a>

//Change CSS styles, based on 'link' variable
$(document).on('click','a.nav-link',function(){

    //Set link variable from 'data-value' of 'nav-link' option
    var link = $("a:focus").attr('data-value');

    //Set the new styles based on 'nav-link' option
    $(document.body).css('--bg-color', 'var(--bg-color-' + link + ')');
    $(document.body).css('--bg-image', 'var(--bg-image-' +  link + ')');

});