是否可以将颜色更改为 CSS 的订单属性？

Question

在Firefox的检查器中，我看到了这个:

element {
order:35;
}

可以设置颜色吗?这是我的年度展望日历，我已经设置了一个特殊的日子不同的颜色。但是，当我点击月份时，这个颜色将不显示，查看它更大。

Answer 1

虽然您可以使用[style="order:29"]等作为选择器的一部分，但在本例中获取的是14 February，关于它是哪个月份的信息在克隆中丢失了。

这是因为在主日历中，月份是根据其在整个12个月组中的第n个子类型位置选择的。相比之下，克隆只有一个月的时间。

这段代码为月份添加了另一个类，这样就不会丢失月份的信息。

然后CSS必须添加更多，以便克隆月份以及原始月份设置所需的颜色。

这将需要做的每一个特殊的日子的CSS。只有2月14日在这个片段中添加了这个:

var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"]
var d = new Date();
var year = d.getFullYear(); // 2016
document.querySelector("#year").innerHTML = year;
var thisMonth = d.getMonth(); // 0 - 11
var today = d.getDate(); // 1 -31
//var nthday = d.getDay();// 0 - 7
var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");

for (var month = 0; month < 12; month++) {
createCalendar(month);
}

function createCalendar(month) {
var monthDiv = createMonthHeader(month);
//ADD class which tells us which month number it is
monthDiv.classList.add('M' + Number(month + 1));
var firstDayOfTheMonth = getFirstDayOfTheMonth(year, month);
var daysinmonth = daysInMonth(year, month)
var counter = 0,
order = 6;
for (var i = 0; i < firstDayOfTheMonth + 7; i++) {
order++;
createDay(month, "&nbsp;", order, monthDiv);
}
for (var i = firstDayOfTheMonth; i < daysInMonth(year, month) + firstDayOfTheMonth; i++) {
counter++;
order++;
createDay(month, counter, order, monthDiv);
}
for (var i = firstDayOfTheMonth + daysinmonth; i < 6 * 7; i++) {
order++;
createDay(month, "&nbsp;", order, monthDiv);
}

}
function createDay(month, counter, order, monthDiv) {
//if(order == 8){order = -1}
var day = document.createElement("div");
if (month == thisMonth && counter == today) {
day.setAttribute("class", "to day");
} else {
day.setAttribute("class", "day");
}
day.setAttribute("style", "order:" + order);
day.innerHTML = counter;
monthDiv.appendChild(day);
}

function createMonthHeader(month) {
var calendar = document.querySelector(".calendar");

var monthDiv = document.createElement("div");
monthDiv.setAttribute("class", "month");
calendar.appendChild(monthDiv);
var h4 = document.createElement("h4");
h4.innerHTML = monthNamesRy[month];
monthDiv.appendChild(h4);
for (var i = 0; i < 7; i++) {
//var order = (i == 0) ? order = 7 : order = i;
var hday = document.createElement("div");
hday.setAttribute("class", "day OfWeek");
hday.setAttribute("style", "order:" + i);
hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
monthDiv.appendChild(hday);
}

return monthDiv;
/*
<div class="month">

<div class="monthHeader">
<div class="day OfWeek">Sun</div>
<div class="day OfWeek">Mon</div>
<div class="day OfWeek">Tue</div>
<div class="day OfWeek">Wed</div>
<div class="day OfWeek">Thu</div>
<div class="day OfWeek">Fri</div>
<div class="day OfWeek">Sat</div>
</div>

<div class="daysOfTheMonth">
*/
}

function daysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate(); //29/03/2016 (month + 1)
}
/*function leapYear(year){
return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}
function getNextMonth(month){
if (month == 11) {
var nextMonth = 0;
} else {
var nextMonth = month+1;
}
return nextMonth;
}
*/
function getMonthName(month) {
return monthNamesRy[month];
}
function getDayName(day) {
return daysOfTheWeekRy[day];
}
function getFirstDayOfTheMonth(y, m) {
var firstDay = new Date(y, m, 1);
return firstDay.getDay();
}
function getLastDayOfTheMonth(y, m) {
var lastDay = new Date(y, m + 1, 0);
return lastDay.getDay();
}

// the popp up
var calendar = document.querySelector(".calendar");
var cloneCont = document.querySelector(".cloneCont");
var requestId = false;
calendar.addEventListener("click", function(e) {
if (this.querySelector(".cloneCont")) {
this.removeChild(this.querySelector(".cloneCont"));
} else if (e.target.parentNode.className.includes('month M')) {
var monthClone = e.target.parentNode.cloneNode(true);
monthClone.className += " cloneMonth";
var cloneCont = document.createElement("div");
cloneCont.className += " cloneCont";
cloneCont.appendChild(monthClone);
this.appendChild(cloneCont);
}
}, false);

html {
font-size: 80%;
background: black;
}
* {
margin: 0;
padding: 0;
font-family: "Segoe UI", Times, serif;
}
.calendar,
section {
max-width: 50rem;
}
.day {
width: 2em;
height: 2em;
color: #fff;
}
.day:nth-of-type(7n+1) {
color: #f09;
}
.to.day {
color: #07a;
font-weight: bold;
background: none;
border-radius: 50%;
box-shadow: 0px 0px 2px black;
}
.month {
width: calc(2em * 7);
padding: 1em;
cursor: pointer;
}
h4 {
font-size: 1em;
text-transform: capitalize;
color: darkgoldenrod;
}
h1#year {
font-size: 2em;
height: 29px;
font-weight: normal;
font-family: Segoe UI, Fertigo Pro, Open Sans;
padding: 1em 1em .5em 1em;
margin-bottom: .5em;
border-bottom: 5px double #492191;
text-shadow: 0px 2px 1px black, 0px 2px 1px black, 0px 2px 1px black, 4px 2px 1px orange;
color: white;
}
.no-flexbox .day {
text-align: center;
float: left;
line-height: 1.5em;
}
.no-flexbox h4 {
text-align: center;
}
.no-flexbox h1 {
width: 4em;
}

/* FLEXBOX styles*/
body,
body * {
display: flex;
justify-content: center;
}
h4 {
justify-content: center;
flex: 1 0 100%;
}
h1 {
justify-content: center;
align-self: stretch;
}
.calendar,
.month {
flex-wrap: wrap;
padding: 2.5em;
}
section {
flex-direction: column;
align-self: center;
}
.month {
align-items: flex-start;
}
.day {
align-items: center;
justify-content: center;
}

/*for a Spanish like calendar  
.month .day:nth-of-type(1){order:7!important;}
.month .day:nth-of-type(8){order:-1!important;}

*/
script {
display: none;
}
.cloneCont {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em;
margin-top: -10.89em;
box-shadow: 0px 0px 5px 1px #ccc;
transform: scale(2, 2);
background: rgba(0, 0, 0, .9);
animation: redimensionar .5s cubic-bezier(.86, 0, .07, 1);
}
.month.cloneMonth {
display: flex
}
.month.cloneMonth:after {
content: "2718";
color: #f09;
position: absolute;
top: 1em;
right: 1em;
}
.cloneCont.trans> {
transform: translateY(1000px);
background: rgba(0, 0, 0, .9);
opacity: 0;
animation: trasladar .5s cubic-bezier(.86, 0, .07, 1);
}

/*********************SPECIAL DAYS*********************/

/*   July 4th         */
.calendar>div:nth-of-type(7)>div[style="order:22"] {
font-weight: bold;
color: #00f;
text-align: center;
}

/*   September 5th         */
.calendar>div:nth-of-type(9)>div[style="order:22"] {
font-weight: bold;
color: #65557d;
text-align: center;
}

/*   October 31st     */
.calendar>div:nth-of-type(10)>div[style="order:50"] {
font-weight: bold;
color: #ffa500;
text-align: center;
}

/*   November 25th   */
.calendar>div:nth-of-type(11)>div[style="order:40"] {
font-weight: bold;
color: #a61;
text-align: center;
}

/*   December 24th   */
.calendar>div:nth-of-type(12)>div[style="order:41"] {
font-weight: bold;
color: #0a0;
text-align: center;
}

/*   December 25th   */
.calendar>div:nth-of-type(12)>div[style="order:42"] {
font-weight: bold;
color: #0a0;
text-align: center;
}

/*   December 31st   */
.calendar>div:nth-of-type(12)>div[style="order:47"] {
font-weight: bold;
color: tan;
text-align: center;
}

/*   January 1st   */
.calendar>div:nth-of-type(1)>div[style="order:20"] {
font-weight: bold;
color: #80794f;
text-align: center;
}

/*   February 14th   */
.calendar>div:nth-of-type(2)>div[style="order:29"],
/* ADDED */
.cloneCont>div.M2>div[style="order:29"] {
font-weight: bold;
color: #6710c9;
text-align: center;
}

/*  March 17th   */
.calendar>div:nth-of-type(3)>div[style="order:32"] {
font-weight: bold;
color: #0a0;
text-align: center;
}

/*  April 4th  */
.calendar>div:nth-of-type(4)>div[style="order:21"] {
font-weight: bold;
color: yellow;
text-align: center;
}

/*   May 30th   */
.calendar>div:nth-of-type(5)>div[style="order:43"] {
font-weight: bold;
color: #5d839c;
text-align: center;
}

/*   June 19th   */
.calendar>div:nth-of-type(6)>div[style="order:35"] {
font-weight: bold;
color: #f2c035;
text-align: center;
}

/*********************SPECIAL DAYS*********************/
@keyframes redimensionar {
0% {
transform: scale(1, 1);
background: rgba(0, 0, 0, .9);
opacity: 0;
}
100% {
transform: scale(2, 2);
background: rgba(0, 0, 0, .9);
opacity: 1;
}
}
@keyframes trasladar {
0% {
opacity: 1;
}
100% {
transform: translateY(1000px);
opacity: 0;
}
}

<section>
<h1 id="year"></h1>
<div class="calendar"></div>
</section>