在元素样式属性中使用两种样式

Question

Hellow everyone，

我正在使用下面的代码来突出显示表的行。我想知道是否可以添加选框效果(即从左到右移动文本(，即

<marquee>TEXT</marquee>

在同一行中。例如，假设现在当前时间是上午 12：45，那么它将选择类 ra1 并具有红色 bckground。同时，我想在同一活动行中添加选框效果，并且在 45 分钟后，另一行(即类 raa3(将处于活动状态并且具有红色背景。我现在想在这一行中拥有选框效果，即当前已选择并处于活动状态的类 ra3。

function openCity(evt, cityName, today) {
var i, tabcontent, tablinks;
tabcontent =
document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
if (typeof today == 'undefined') {
evt.currentTarget.className += " active";
} else {
tablinks[today].className += " active";
}
}
let now = new Date().getHours() * 100 + new
Date().getMinutes();
let times = [45, 100, 145];
let classes = ['ra1', 'ra3', ];
let selected = classes[times.reduce((acc, curr, idx) => now >=
curr ? idx : acc)];
if (selected){
var elements = document.getElementsByClassName(selected);
for(var i=0;i<elements.length; i++)
elements[i].style.background = 'red';
}

.tabcontent { display: none }

<div class="tab" style="margin-top: 1.6%;  ">
<button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button>
<button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button>
</div>
<div id="Sun0" class="tabcontent" id="np">
<div style="overflow-x:auto;">
<table>
<col width="65%">
<col width="35%">
<tr>
<th>Class</th>
<th>Time</th>
</tr>
<tr>
<td class="ra1">10:15-11:00AM</td>
<td style="background:black; color:Yellow;">It is Sunday </td>
</tr>
<tr>
<td class="ra3">11:00-11:45AM</td>
<td style="background:black; color:Yellow;">It is Sunday</td>
</tr>
</table>
</div>
</div>
<div id="Mon0" class="tabcontent">
<!--Monnday-->
<div style="overflow-x:auto;">
<table>
<col width="65%">
<col width="35%">
<tr>
<th>Class</th>
<th>Time</th>
</tr>
<tr>
<td class="ra1">10:15-11:00AM</td>
<td style="background:black; color:Yellow;">It is Monday</td>
</tr>
<tr>
<td class="ra3">11:00-11:45AM</td>
<td style="background:black; color:Yellow;">It is Monday</td>
</tr>
</table>
</div>
</div>

Answer 1

您可以使用innerHTML获取所选div中的所有内容，然后可以使用elements[i].innerHTML = "<marquee>" + elements[i].innerHTML + "</marquee>"将其包装在"标签中

function openCity(evt, cityName, today) {
var i, tabcontent, tablinks;
tabcontent =
document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
if (typeof today == 'undefined') {
evt.currentTarget.className += " active";
} else {
tablinks[today].className += " active";
}
}
let now = new Date().getHours() * 100 + new
Date().getMinutes();
let times = [45, 100, 145];
let classes = ['ra1', 'ra3', ];
let selected = classes[times.reduce((acc, curr, idx) => now >=
curr ? idx : acc)];
if (selected){
var elements = document.getElementsByClassName(selected);
for(var i=0;i<elements.length; i++){
elements[i].style.background = 'red';
elements[i].innerHTML = "<marquee>" + elements[i].innerHTML + "</marquee>";
}
}

.tabcontent { display: none }

<div class="tab" style="margin-top: 1.6%;  ">
<button class="tablinks" onclick="openCity(event, 'Sun0') ">Sun</button>
<button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button>
</div>
<div id="Sun0" class="tabcontent" id="np">
<div style="overflow-x:auto;">
<table>
<col width="65%">
<col width="35%">
<tr>
<th>Class</th>
<th>Time</th>
</tr>
<tr>
<td class="ra1">10:15-11:00AM</td>
<td style="background:black; color:Yellow;">It is Sunday </td>
</tr>
<tr>
<td class="ra3">11:00-11:45AM</td>
<td style="background:black; color:Yellow;">It is Sunday</td>
</tr>
</table>
</div>
</div>
<div id="Mon0" class="tabcontent">
<!--Monnday-->
<div style="overflow-x:auto;">
<table>
<col width="65%">
<col width="35%">
<tr>
<th>Class</th>
<th>Time</th>
</tr>
<tr>
<td class="ra1">10:15-11:00AM</td>
<td style="background:black; color:Yellow;">It is Monday</td>
</tr>
<tr>
<td class="ra3">11:00-11:45AM</td>
<td style="background:black; color:Yellow;">It is Monday</td>
</tr>
</table>
</div>
</div>