时间戳

首页 > 解决方案 > 使用 javascript，如何通过 onclick 使 CSS 变量覆盖棒？

javascript - 使用 javascript，如何通过 onclick 使 CSS 变量覆盖棒？

问题描述

使用此处的建议，我可以通过单击导航链接更改 CSS 变量。但是，这些变化并没有持续下去。他们会暂时切换到新样式，然后又会转回原来的样式。这甚至在没有页面刷新的情况下——onmouseup 之后的一秒钟。

谢谢你。

CSS

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);    
}

HTML

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

JavaScript

//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 + ')');

});

标签： javascriptjqueryhtmlcss

解决方案

您需要将全局变量分配给background-color和background-imageCSS props，以便将来对全局 CSS 变量值的任何重新分配都能正确反映。

CSS

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);   

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

JS

// cache body ref
var body = $(document.body);

$('.nav-link').on('click', function(e){
  // this should be removed if you want the page to change
  e.preventDefault();
  // ref page
  var page = $(this).data('value');
  // update global vars
  body
    .attr('style', '--bg-color: var(--bg-color-' + page + ')')
    .attr('style', '--bg-image: var(--bg-image-' + page + ')');
});

演示

推荐阅读