我的一个产品化项目里产品提了一个需求就是可以更换主题颜色,不说废话直接上干货。
原理就是通过颜色选择器用户可以在页面选择指定的颜色然后通过js操作css变量覆盖。如果需要永久更换需要后端的配合吧选择的颜色传递给后端,然后每次页面初始化的时候再通过js操作css变量
首先把项目里所有的需要更换的主题css集合到一个样式文件里,这里运用了css的原生变量。
:root {
--tn-nav-color: #4e6e53;
}
/*顶部导航栏的标题颜色*/
.tn-nav .tn-nav-menu .current-system {
color: var(--tn-nav-color);
}
其次页面的选择器选择颜色(我这里用的是layui的选择器)就不上图了
重点来了如何通过js操作css变量
var root = document.querySelector(':root');
$scope.changeColor = function(color){
root.style.setProperty('--tn-nav-color',color)
}
layui.use('colorpicker', function(){
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1' //绑定元素
,done: function(color){ //颜色改变的回调
console.log(color)
$scope.list.color = color
console.log($scope.list.color)
$scope.changeColor($scope.list.color)
$scope.save()
}
});
});
/***保存信息***/
$scope.save = function () {
//提交遮罩层
$('.save-modal').show();
if ($scope.isSubmit === true) {
console.log('请勿重复提交');
return;
}
console.log("提交数据");
console.log($scope.list);
colorService.add($scope.list).then(function (data) {
//移除遮罩层
$('.save-modal').hide();
if (data.errorCode == 0) {
toastr.success("保存成功!", "更换主题");
} else {
toastr.error("保存失败!", "更换主题");
}
}, function () {
//移除遮罩层
$('.save-modal').hide();
toastr.error("保存失败!", "更换主题");
})
};
第一次写文章可能写的不太好,也是给自己做个记录。接下来给大家2个链接是关于js操作css的方法,我是参考2位老哥的。
wow.techbrood.com/fiddle/3267…