如何基于前三个字符设置元素样式

How to style elements based on first three characters?

本文关键字：字符 三个 设置 元素 样式 何基于      更新时间：2023-09-26

我正在为我的朋友编写一个简洁的日历功能。他有一个表，他希望弹出一个事件列表，该列表对应于所单击的日期(或单元格)。例如，如果他在每月的第三天单击标记为3的单元格，则会弹出一些内容，列出当天的事件。

我已经走得很远了。这是我的javascript:

function calendar() {
 var items = calendar.arguments.length;
  for(i = 0;i < items; i++){
document.getElementById('popupdiv').innerHTML += "<li>"+calendar.arguments[i]+"</li>";
  }
 document.getElementById('popup').style.display="block";
 document.getElementById('hide').style.display="block";
}

这确实有效。当函数calendar()被调用时，参数/参数将成为事件，它们将被列为<li> s。

无论如何，我想有某种方式让他用红色字体标记更重要的事件。我正在考虑通过检索每个参数的前三个字母来实现这一点，如果它们等于字符串"red"，则将文本变为红色(并删除参数的这一部分，以便它不会显示在实际的弹出窗口中)。

有更简单的方法吗?

您的活动需要更多的信息。除了事件名称之外，还可以添加一个类选项。传递一组事件项，可能像这样:

var items = [
    { 'name': 'Birthday party', 'class': 'fun' },
    { 'name': 'Midterm', 'class': 'important' }
];
function calendar(items)
{
    var newItemsHtml = '';
    for (var i=0, j=items.length; i<j; i++)
    {
        newItemsHtml += '<li class="'+items[i].class+'">'+items[i].name+'</li>';
    }
    var targetList = document.getElementById('popupListNotADivTheyDoNotHaveListItems');
    targetList.innerHTML += newItemsHTML;
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';
    // Better in jQuery:
    $('#popuplist').append(newItemsHtml);
    $('#popup').show();
    $('#hide').show();
}
但是，

这需要数组知识。要完全按照您的要求去做，请尝试这样做:

function calendar(){
    var items = calendar.arguments;
    for (item in items){
        var class = (item.substring(0,3) === 'red') ? ' class="red"' : '';
        var target = document.getElementById('popupdiv');
        target.innerHTML += '<li'+class+'>'+item+'</li>';
    }
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';
}

去掉项目名称中的"red":

function calendar(){
    var items = calendar.arguments;
    for (item in items){
        var class = '';
        if (item.substring(0,3) === 'red'){
            class = ' class="red"';
            item = item.substring(3);
        }
        var target = document.getElementById('popupdiv');
        target.innerHTML += '<li'+class+'>'+item+'</li>';
    }
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';
}

定义一个CSS类

li.red
{
color:red;
}
or
li.red{color:#ff0000;}
li.red{color:rgb(255,0,0);}

然后在你的javascript代码

for(i = 0;i < items; i++){
document.getElementById('popupdiv').innerHTML += '<li class="'+(i<3?'red':'')+'">'+calendar.arguments[i]+'</li>';
  }
相关文章：