使用来自 here 的建议,我可以通过单击导航链接来更改 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 + ')');
});
最佳答案
您需要将全局变量分配给 background-color
和 background-image
CSS 属性,以便将来对全局 CSS 变量值的任何重新分配都能正确反射(reflect)。
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 + ')');
});
关于javascript - 使用 javascript,如何通过 onclick 使 CSS 变量覆盖粘贴?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51488873/