如何通過JavaScript修改邊框 - 僞類元素的底色？

我正在嘗試將其中一個元素的邊框顏色更改爲紅色。如何通過JavaScript修改邊框 - 僞類元素的底色？

var monDaynum = 30; 
 
var nowDay = 3; 
 

 
var el = document.getElementById('calendar'); 
 

 
for(var i = 1; i <= monDaynum; i++) { 
 
    var subContent = document.createElement("div"); 
 
    subContent.className = "canChoose"; 
 
    if(nowDay === i){ 
 
     subContent.style.borderBottomColor = "red" // doesn't work 
 
    } else { 
 

 
    } 
 
    if(i == nowDay){ 
 
     subContent.classList.add("today"); 
 
    } 
 
    subContent.innerHTML = i; 
 
    el.appendChild(subContent); 
 
}

.canChoose { 
 
    width: 50px; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 
.calendar-content .canChoose:after { 
 
    width: 20px; 
 
    margin-top: 5px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-bottom: 8px solid #5A8C19; /*Change the color here*/ 
 
    border-radius: 10px; 
 
    content: ""; 
 
    display: block; 
 
}

<div id="calendar" class="calendar-content"> 
 

 
</div>

我試着用JavaScript代碼來改變，但未能

來源

2017-08-07 roybill

[從JavaScript設置CSS僞類的規則]的可能的複製（https://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from- javascript） – y0hami

首先，相關的代碼直接屬於你的問題，而不僅僅是截圖。 – CBroe

你非常接近。您不能直接操作元素的樣式來更改它，因爲樣式應用於僞類。但是，您可以像您一樣添加一個班級。

所有你仍然需要的是具有附加類的元素的CSS聲明。

var monDaynum = 30; 
 
var nowDay = 3; 
 

 
var el = document.getElementById('calendar'); 
 

 
for(var i = 1; i <= monDaynum; i++) { 
 

 
    var subContent = document.createElement("div"); 
 
    subContent.className = "canChoose"; 
 

 
    if(i == nowDay){ 
 
     subContent.classList.add("today"); 
 
    } 
 
    subContent.innerHTML = i; 
 
    el.appendChild(subContent); 
 
}

.canChoose { 
 
    width: 13%; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 
.calendar-content .canChoose:after { 
 
    width: 20px; 
 
    margin-top: 5px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-bottom: 8px solid #5A8C19; /*Change the color here*/ 
 
    border-radius: 10px; 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
.calendar-content .canChoose.today:after { 
 
    border-bottom-color: red; 
 
}

<div id="calendar" class="calendar-content"> 
 

 
</div>

來源

2017-08-08 03:47:13

我可以看到它工作得很好。看到JSfiddle

我認爲你失蹤monDaynum,nowDay甚至el。仔細檢查/調試您的代碼。如果您沒有找到任何內容，請直接修改您的問題並添加相關代碼，就像@CBroe所說的那樣。

來源

2017-08-07 12:05:39

如何通過JavaScript修改邊框 - 僞類元素的底色？

回答

相關問題