使用javascript,如何使CSS变量覆盖粘贴?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (31)

我可以通过点击导航链接来更改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);    
}

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

});
提问于
用户回答回答于

你正在尝试分配自定义css变量值时,你应该使用background-colorbackground-image

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

JS

// cache body ref
var body = $(document.body);
// grab nav links    
$('.nav-link').on('click', function(e){
  // here for demo but should be removed if you want to allow url change
  e.preventDefault();
  // get data prop
  var page = $(this).data('value');

  // set the new styles based on 'nav-link' option
  body.css({
    'background-color': 'var(--bg-color-' + page + ')',
    'background-image': 'var(--bg-image-' +  page + ')'
  });
});

演示:https://codepen.io/anon/pen/zLwoar

扫码关注云+社区

领取腾讯云代金券