如何使用framework7更改布局主题颜色？
how to change the layout theme color using framework7?
我想使用 framework7 动态改变主体颜色。我尝试包含 framework7.css 和 framework7.js 文件，但它不起作用。
<link rel="stylesheet" href="css/framework7.material.css">
<link rel="stylesheet" href="css/framework7.material.colors.css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/kitchen-sink.css">
<script type="text/javascript" src="js/framework7.js"></script>
<script type="text/javascript" src="js/kitchen-sink.js"></script>
CSS
在您的 css 中，您应该为背景颜色定义 classes。例如，yellow-background、red-background 和 bluebackground.
.yellow-background {
background: yellow;
}
etc.
JS
然后在您的 javascript 中，应根据按钮的点击添加或删除 class。像这样：
$$('.some-button').on('click', function (e) {
$$('.some-div').removeClass('yellow-background');
$$('.some-div').removeClass('blue-background');
$$('.some-div').addClass('red-background');
}
如果您想为背景或文本创建自定义颜色。将您的颜色添加到 framework7.material.colors.css :
//your custom background
.layout-bg-custom {
background-color: #fff;
}
//custom text color
.color-custom {
color: #ec325b;
}
//custom framework7 buttons
.theme-custom .button.button-fill {
background: #ec325b;
color: #fff;
}
同样你可以为不同的标签添加颜色，然后在HTML中将上面的class添加到你想要应用css的标签中。
<button class="button button-fill theme-custom">F7 Footer button</button>
Framework7 已经提供了一些主题颜色（您也可以添加到这些主题中）：http://framework7.io/docs/color-themes.html
我通过创建 css 文件在 Framework7 中创建了我的自定义颜色主题，我已将 framework7.ios.colors.css 中负责创建红色主题颜色的部分复制到该文件中。将 red 替换为我的自定义颜色，即 opco。
我对十六进制颜色 #ff3b30 到 #cbcc33 所做的相同。不要忘记搜索并替换短语 ff3b30，因为 SVG 元素的颜色不会改变。
这样做时，不要忘记通过以下方式将新创建的 .css 文件包含到您的 html 中：
<link rel="stylesheet" href="css/custom-color-theme.css">
我的 css 文件，其中包含适用于 Framework7 的自定义颜色主题：
.color-opco {
color: #cbcc33;
}
.list-block .item-link.list-button.color-opco,
.tabbar a.active.color-opco,
a.color-opco {
color: #cbcc33;
}
.label-switch input[type="checkbox"]:checked + .checkbox.color-opco,
.label-switch.color-opco input[type="checkbox"]:checked + .checkbox {
background-color: #cbcc33;
}
.color-opco.button:not(.button-fill),
.color-opco.buttons-row .button,
.theme-opco .button:not(.button-fill) {
border-color: #cbcc33;
}
html:not(.watch-active-state) .color-opco.button:not(.button-fill):active,
html:not(.watch-active-state) .color-opco.buttons-row .button:active,
html:not(.watch-active-state) .theme-opco .button:not(.button-fill):active,
.color-opco.button:not(.button-fill).active-state,
.color-opco.buttons-row .button.active-state,
.theme-opco .button:not(.button-fill).active-state {
background-color: rgba(255, 59, 48, 0.15);
}
.color-opco.button:not(.button-fill).active,
.color-opco.buttons-row .button.active,
.theme-opco .button:not(.button-fill).active {
background-color: #cbcc33;
color: #fff;
}
.theme-opco .button.button-fill,
.button.button-fill.color-opco {
background: #cbcc33;
color: #fff;
}
.progressbar.color-opco span,
.progressbar.theme-opco span,
.theme-opco .progressbar span,
.progressbar.bg-opco span {
background-color: #cbcc33;
}
.progressbar-infinite.color-opco:before,
.progressbar-infinite.theme-opco:before,
.theme-opco .progressbar-infinite:before,
.progressbar-infinite.bg-opco:before {
background-color: #cbcc33;
}
.color-opco i.icon,
.theme-opco i.icon,
i.icon.color-opco,
i.icon.theme-opco {
color: #cbcc33;
}
i.icon-next.color-opco,
i.icon-next.theme-opco,
.theme-opco i.icon-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
i.icon-prev.color-opco,
i.icon-prev.theme-opco,
.theme-opco i.icon-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
i.icon-back.color-opco,
i.icon-back.theme-opco,
.theme-opco i.icon-back {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M10%2C0l2%2C2l-8%2C8l8%2C8l-2%2C2L0%2C10L10%2C0z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
i.icon-forward.color-opco,
i.icon-forward.theme-opco,
.theme-opco i.icon-forward {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M2%2C20l-2-2l8-8L0%2C2l2-2l10%2C10L2%2C20z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
i.icon-bars.color-opco,
i.icon-bars.theme-opco,
.theme-opco i.icon-bars {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2021%2014'%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M0%2C0h2v2H0V0z%20M4%2C0h17v1H4V0z%20M0%2C6h2v2H0V6z%20M4%2C6h17v1H4V6z%20M0%2C12h2v2H0V12z%20M4%2C12h17v1H4V12z'%2F%3E%3C%2Fsvg%3E");
}
@media (-webkit-min-device-pixel-ratio: 2) {
i.icon-bars.color-opco,
i.icon-bars.theme-opco,
.theme-opco i.icon-bars {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2026'%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M0%2C0h4v4H0V0z%20M8%2C1h34v2H8V1z%20M0%2C11h4v4H0V11z%20M8%2C12h34v2H8V12z%20M0%2C22h4v4H0V22z%20M8%2C23h34v2H8V23z'%2F%3E%3C%2Fsvg%3E");
}
}
.theme-opco a,
.theme-opco .item-link.list-button {
color: #cbcc33;
}
.theme-opco .tabbar a,
.tabbar.theme-opco a,
.theme-opco .tabbar a i,
.tabbar.theme-opco a i {
color: inherit;
}
.theme-opco .tabbar a.active,
.tabbar.theme-opco a.active,
.theme-opco .tabbar a.active i,
.tabbar.theme-opco a.active i {
color: #cbcc33;
}
.theme-opco .range-slider input[type="range"]::-webkit-slider-thumb:before,
.range-slider.theme-opco input[type="range"]::-webkit-slider-thumb:before {
background-color: #cbcc33;
}
.theme-opco .range-slider input[type="range"]::-ms-fill-lower,
.range-slider.theme-opco input[type="range"]::-ms-fill-lower {
background-color: #cbcc33;
}
.theme-opco label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
.theme-opco label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
background-color: #cbcc33;
}
.theme-opco label.label-radio input[type="checkbox"]:checked ~ .item-inner,
.theme-opco label.label-radio input[type="radio"]:checked ~ .item-inner {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23cbcc33'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
}
.theme-opco .picker-calendar-day.picker-calendar-day-selected span {
background-color: #cbcc33 !important;
}
.swiper-pagination.color-opco .swiper-pagination-bullet-active,
.theme-opco .swiper-pagination .swiper-pagination-bullet-active {
background-color: #cbcc33;
}
.swiper-pagination.color-opco .swiper-pagination-progressbar,
.theme-opco .swiper-pagination .swiper-pagination-progressbar {
background-color: #cbcc33;
}
.swiper-pagination.swiper-pagination-progress.bg-opco {
background-color: rgba(255, 59, 48, 0.25);
}
.swiper-button-next.color-opco,
.swiper-container-rtl .swiper-button-prev.color-opco,
.theme-opco .swiper-button-next,
.theme-opco .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.color-opco,
.swiper-container-rtl .swiper-button-next.color-opco,
.theme-opco .swiper-button-prev,
.theme-opco .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
.bg-opco,
.button.button-fill.bg-opco,
a.bg-opco,
.list-block .swipeout-actions-left a.bg-opco,
.list-block .swipeout-actions-right a.bg-opco {
background-color: #cbcc33;
}
.border-opco {
border-color: #cbcc33;
}
.list-block .border-opco.item-inner:after,
.list-block ul.border-opco:after,
.border-opco:after,
.list-block .border-opco.item-inner:before,
.list-block ul.border-opco:before,
.border-opco:before {
background-color: #cbcc33;
}
.badge.color-opco,
.badge.theme-opco {
background-color: #cbcc33;
color: #fff;
}
很简单。
如果您不知道如何使用 DOM 函数。
请检查一次=>
点击 framework7-DOM!
或
如果您熟悉 dom，只需更改任何 CSS，就像：
$$('.classname').css({
left: '100px',
top: '200px',
color: 'red',
width: '300px',
marginLeft: '17px',
'padding-right': '20px'
});
您可以在此处使用所有 CSS 属性，如代码中所示。
您根本不需要添加或删除 classes。
但是如果你想要改变颜色的 class 已经添加了 'important'，
只需将 CSS 更改为：
this.$$('.appbg').attr('style', 'background-color: green !important');
我想使用 framework7 动态改变主体颜色。我尝试包含 framework7.css 和 framework7.js 文件，但它不起作用。
<link rel="stylesheet" href="css/framework7.material.css">
<link rel="stylesheet" href="css/framework7.material.colors.css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/kitchen-sink.css">
<script type="text/javascript" src="js/framework7.js"></script>
<script type="text/javascript" src="js/kitchen-sink.js"></script>
CSS
在您的 css 中，您应该为背景颜色定义 classes。例如，yellow-background、red-background 和 bluebackground.
.yellow-background {
background: yellow;
}
etc.
JS
然后在您的 javascript 中，应根据按钮的点击添加或删除 class。像这样：
$$('.some-button').on('click', function (e) {
$$('.some-div').removeClass('yellow-background');
$$('.some-div').removeClass('blue-background');
$$('.some-div').addClass('red-background');
}
如果您想为背景或文本创建自定义颜色。将您的颜色添加到 framework7.material.colors.css :
//your custom background
.layout-bg-custom {
background-color: #fff;
}
//custom text color
.color-custom {
color: #ec325b;
}
//custom framework7 buttons
.theme-custom .button.button-fill {
background: #ec325b;
color: #fff;
}
同样你可以为不同的标签添加颜色，然后在HTML中将上面的class添加到你想要应用css的标签中。
<button class="button button-fill theme-custom">F7 Footer button</button>
Framework7 已经提供了一些主题颜色（您也可以添加到这些主题中）：http://framework7.io/docs/color-themes.html
我通过创建 css 文件在 Framework7 中创建了我的自定义颜色主题，我已将 framework7.ios.colors.css 中负责创建红色主题颜色的部分复制到该文件中。将 red 替换为我的自定义颜色，即 opco。
我对十六进制颜色 #ff3b30 到 #cbcc33 所做的相同。不要忘记搜索并替换短语 ff3b30，因为 SVG 元素的颜色不会改变。
这样做时，不要忘记通过以下方式将新创建的 .css 文件包含到您的 html 中：
<link rel="stylesheet" href="css/custom-color-theme.css">
我的 css 文件，其中包含适用于 Framework7 的自定义颜色主题：
.color-opco {
color: #cbcc33;
}
.list-block .item-link.list-button.color-opco,
.tabbar a.active.color-opco,
a.color-opco {
color: #cbcc33;
}
.label-switch input[type="checkbox"]:checked + .checkbox.color-opco,
.label-switch.color-opco input[type="checkbox"]:checked + .checkbox {
background-color: #cbcc33;
}
.color-opco.button:not(.button-fill),
.color-opco.buttons-row .button,
.theme-opco .button:not(.button-fill) {
border-color: #cbcc33;
}
html:not(.watch-active-state) .color-opco.button:not(.button-fill):active,
html:not(.watch-active-state) .color-opco.buttons-row .button:active,
html:not(.watch-active-state) .theme-opco .button:not(.button-fill):active,
.color-opco.button:not(.button-fill).active-state,
.color-opco.buttons-row .button.active-state,
.theme-opco .button:not(.button-fill).active-state {
background-color: rgba(255, 59, 48, 0.15);
}
.color-opco.button:not(.button-fill).active,
.color-opco.buttons-row .button.active,
.theme-opco .button:not(.button-fill).active {
background-color: #cbcc33;
color: #fff;
}
.theme-opco .button.button-fill,
.button.button-fill.color-opco {
background: #cbcc33;
color: #fff;
}
.progressbar.color-opco span,
.progressbar.theme-opco span,
.theme-opco .progressbar span,
.progressbar.bg-opco span {
background-color: #cbcc33;
}
.progressbar-infinite.color-opco:before,
.progressbar-infinite.theme-opco:before,
.theme-opco .progressbar-infinite:before,
.progressbar-infinite.bg-opco:before {
background-color: #cbcc33;
}
.color-opco i.icon,
.theme-opco i.icon,
i.icon.color-opco,
i.icon.theme-opco {
color: #cbcc33;
}
i.icon-next.color-opco,
i.icon-next.theme-opco,
.theme-opco i.icon-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
i.icon-prev.color-opco,
i.icon-prev.theme-opco,
.theme-opco i.icon-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
i.icon-back.color-opco,
i.icon-back.theme-opco,
.theme-opco i.icon-back {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M10%2C0l2%2C2l-8%2C8l8%2C8l-2%2C2L0%2C10L10%2C0z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
i.icon-forward.color-opco,
i.icon-forward.theme-opco,
.theme-opco i.icon-forward {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M2%2C20l-2-2l8-8L0%2C2l2-2l10%2C10L2%2C20z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
i.icon-bars.color-opco,
i.icon-bars.theme-opco,
.theme-opco i.icon-bars {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2021%2014'%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M0%2C0h2v2H0V0z%20M4%2C0h17v1H4V0z%20M0%2C6h2v2H0V6z%20M4%2C6h17v1H4V6z%20M0%2C12h2v2H0V12z%20M4%2C12h17v1H4V12z'%2F%3E%3C%2Fsvg%3E");
}
@media (-webkit-min-device-pixel-ratio: 2) {
i.icon-bars.color-opco,
i.icon-bars.theme-opco,
.theme-opco i.icon-bars {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2026'%3E%3Cpath%20fill%3D'%23cbcc33'%20d%3D'M0%2C0h4v4H0V0z%20M8%2C1h34v2H8V1z%20M0%2C11h4v4H0V11z%20M8%2C12h34v2H8V12z%20M0%2C22h4v4H0V22z%20M8%2C23h34v2H8V23z'%2F%3E%3C%2Fsvg%3E");
}
}
.theme-opco a,
.theme-opco .item-link.list-button {
color: #cbcc33;
}
.theme-opco .tabbar a,
.tabbar.theme-opco a,
.theme-opco .tabbar a i,
.tabbar.theme-opco a i {
color: inherit;
}
.theme-opco .tabbar a.active,
.tabbar.theme-opco a.active,
.theme-opco .tabbar a.active i,
.tabbar.theme-opco a.active i {
color: #cbcc33;
}
.theme-opco .range-slider input[type="range"]::-webkit-slider-thumb:before,
.range-slider.theme-opco input[type="range"]::-webkit-slider-thumb:before {
background-color: #cbcc33;
}
.theme-opco .range-slider input[type="range"]::-ms-fill-lower,
.range-slider.theme-opco input[type="range"]::-ms-fill-lower {
background-color: #cbcc33;
}
.theme-opco label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
.theme-opco label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
background-color: #cbcc33;
}
.theme-opco label.label-radio input[type="checkbox"]:checked ~ .item-inner,
.theme-opco label.label-radio input[type="radio"]:checked ~ .item-inner {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23cbcc33'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
}
.theme-opco .picker-calendar-day.picker-calendar-day-selected span {
background-color: #cbcc33 !important;
}
.swiper-pagination.color-opco .swiper-pagination-bullet-active,
.theme-opco .swiper-pagination .swiper-pagination-bullet-active {
background-color: #cbcc33;
}
.swiper-pagination.color-opco .swiper-pagination-progressbar,
.theme-opco .swiper-pagination .swiper-pagination-progressbar {
background-color: #cbcc33;
}
.swiper-pagination.swiper-pagination-progress.bg-opco {
background-color: rgba(255, 59, 48, 0.25);
}
.swiper-button-next.color-opco,
.swiper-container-rtl .swiper-button-prev.color-opco,
.theme-opco .swiper-button-next,
.theme-opco .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.color-opco,
.swiper-container-rtl .swiper-button-next.color-opco,
.theme-opco .swiper-button-prev,
.theme-opco .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23cbcc33'%2F%3E%3C%2Fsvg%3E");
}
.bg-opco,
.button.button-fill.bg-opco,
a.bg-opco,
.list-block .swipeout-actions-left a.bg-opco,
.list-block .swipeout-actions-right a.bg-opco {
background-color: #cbcc33;
}
.border-opco {
border-color: #cbcc33;
}
.list-block .border-opco.item-inner:after,
.list-block ul.border-opco:after,
.border-opco:after,
.list-block .border-opco.item-inner:before,
.list-block ul.border-opco:before,
.border-opco:before {
background-color: #cbcc33;
}
.badge.color-opco,
.badge.theme-opco {
background-color: #cbcc33;
color: #fff;
}
很简单。 如果您不知道如何使用 DOM 函数。 请检查一次=> 点击 framework7-DOM!
或
如果您熟悉 dom，只需更改任何 CSS，就像：
$$('.classname').css({
left: '100px',
top: '200px',
color: 'red',
width: '300px',
marginLeft: '17px',
'padding-right': '20px'
});
您可以在此处使用所有 CSS 属性，如代码中所示。 您根本不需要添加或删除 classes。
但是如果你想要改变颜色的 class 已经添加了 'important'， 只需将 CSS 更改为：
this.$$('.appbg').attr('style', 'background-color: green !important');