用js设置主题样式

最新推荐文章于 2024-04-27 16:48:56 发布

m0_37850231

最新推荐文章于 2024-04-27 16:48:56 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/m0_37850231/article/details/100121316

版权

点击按钮，同时改变字体颜色、边框颜色和背景颜色

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../plugins/jquery/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="box.css">
    <style type="text/css" media="screen">

    </style>
</head>
<body>
    <div class="widget-container" id="container">
        <div class="box-header with-border">
            <h3 class="box-title">组件标题</h3>
        </div>
        <div class=" box-body"></div>
    </div>
    <div class="RadioStyle"></div>
</body>
<script src="box.js"></script>
<script>
    $.each(themes, function(index, val) {
        var _input=$('<input type="radio" name="theme" id="'+val.id+'" value="'+val.name+'" />');
        var _label=$('<label for="'+val.id+'">'+val.text+'</label>');
       $('.RadioStyle').append(_input);
       $('.RadioStyle').append(_label);
   });

    $('input[type=radio][name=theme]').on('change',function(event){
        var _themeName=$('input[type=radio][name=theme]:checked').val();
        SetTheme(_themeName);
    });
    function SetTheme(themeName){
        var box=$('.widget-container');
        //var theme=themes.filter((val)=>val.name==themeName)[0];
        var themeArr=themes.filter(function(val){
           return val.name==themeName;
        });
        var theme=themeArr[0];
        var box_title=box.find('.box-header');
        $.each(theme.title,function(index,val){
            //console.log(index+'===='+val);
            var _styleName=index;
            var _value=val;
            box_title.css(_styleName,_value);
        });
        $.each(theme.box,function(index,val){
            var _styleName=index;
            var _value=val;
            box.css(_styleName,_value);
        });
    }
</script>

</html>

css:

.widget-container{
    border-radius:3px;
    border:1px solid #eee;
    background-color: #fff;
    width:80%;
    height:300px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
.widget-container .box-header{
    color:#444;
    display:block;
    padding:10px;
    height:35px;
    position:relative;
    line-height: 35px;
}
.widget-container .box-header .box-title{
    display:inline-block;
    font-size: 16px;
    line-height:1;
    margin:0;
    margin-left:10px;
    border-left:5px solid #2086ef;
    border-radius:2px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 2px;
    font-family: '微软雅黑';
}
.widget-container .box-body{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding:2px;
    height:264px;
}
.with-border{
    border-bottom:1px solid #ddd;
}


.RadioStyle input{
            display:none;
        }
.RadioStyle label{
    border:1px solid #ccc;
    color:#666;
    padding:2px 10px 2px 5px;
    line-height:28px;
    min-width:80px;
    text-align:center;
    float:left;
    margin:10px;
    border-radius:5px;
}
.RadioStyle input:checked+label{
  background:url('../img/Img/ico_checkon.svg') no-repeat right bottom;
  border:1px solid #00a4ff;
  background-size:21px 21px;
  color:#00a4ff;
}

js:

var theme1={
    name:'theme1',
    id:'#000',
    text:'白底黑字不带边框',
    title:{
        color:'#000',
        'background-color':'#fff',
        border:'1px solid #fff'
    },
    box:{
        'background-color':'#fff',
        background:'',
        border:'none'
    }
}
var theme2={
    name:'theme2',
    id:'gray',
    text:'灰底黑字有边框',
    title:{
        color:'#000',
        'background-color':'#f8f8f8',
        border:'1px solid #f8f8f8'
    },
    box:{
        'background-color':'#000',
        background:'',
        border:'1px solid #f8f8f8'
    }
}

var theme3={
    name:'theme3',
    text:'黑底白字无边框',
    id:'black',
    title:{
        color:'#fff',
        'background-color':'#203141',
        border:'1px solid #203141'
    },
    box:{
        'background-color':'#000',
        background:'',
        border:'0'
    }
}

var theme4={
    name:'theme4',
    text:'蓝底白字无边框',
    id:'blue',
    title:{
        color:'#fff',
        'background-color':'#7da8d3',
        border:'1px solid #7da8d3'
    },
    box:{
        'background-color':'#000',
        background:'',
        border:'0'
    }
}
var theme5={
    name:'theme5',
    id:'green',
    text:'绿底白字有边框',
    title:{
        color:'#fff',
        'background-color':'#0ea890',
        border:'1px solid #0ea890'
    },
    box:{
        'background-color':'#000',
        background:'',
        border:'1px solid #0ea890'
    }
}

var themes=[];
themes.push(theme1);
themes.push(theme2);
themes.push(theme3);
themes.push(theme4);
themes.push(theme5);

m0_37850231

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js设置主题样式

点击按钮，同时改变字体颜色、边框颜色和背景颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="../plugins/jquery/jquer...
复制链接

扫一扫