如何通过CSS或JS修改<td>元素内的日期数字顺序转换显示格式

当然可以解决这个问题！下面我会分别介绍用JavaScript和CSS（配合少量JS）两种方法来实现你想要的日期显示格式转换：

这种方法直接修改页面上的日期文本内容，操作简单且兼容性好，是最直接的解决方案。

步骤说明： #

1. 选中页面上所有需要转换的日期元素（可以通过类名、表格列位置等方式定位）
2. 遍历每个日期元素，提取原始的YY/MM/DD格式日期
3. 分割日期的年、月、日部分，重新拼接成DD/MM/YY格式
4. 将转换后的日期替换回元素中

代码示例： #

// 假设所有日期元素都带有类名 ".press-date"，根据你的实际页面结构调整选择器
document.querySelectorAll('.press-date').forEach(dateElement => {
  const originalDate = dateElement.textContent.trim();
  
  // 先验证日期格式是否符合 YY/MM/DD，避免处理异常内容
  if (/^\d{2}\/\d{2}\/\d{2}$/.test(originalDate)) {
    const [year, month, day] = originalDate.split('/');
    // 拼接成 DD/MM/YY 格式
    const formattedDate = `${day}/${month}/${year}`;
    dateElement.textContent = formattedDate;
  }
});

如果日期是在表格的固定列（比如第二列），可以把选择器改成：

document.querySelectorAll('table tr td:nth-child(2)')

这种方法通过CSS伪元素来展示转换后的日期，原始日期会被隐藏。适合需要保留原始日期值用于其他逻辑的场景。

步骤说明： #

1. 用JavaScript将原始日期的年、月、日分别存储到元素的自定义数据属性中
2. 隐藏原始日期文本
3. 使用CSS伪元素读取数据属性，拼接成DD/MM/YY格式显示

代码示例： #

JavaScript部分：

document.querySelectorAll('.press-date').forEach(dateElement => {
  const originalDate = dateElement.textContent.trim();
  if (/^\d{2}\/\d{2}\/\d{2}$/.test(originalDate)) {
    const [year, month, day] = originalDate.split('/');
    // 给元素添加数据属性
    dateElement.setAttribute('data-year', year);
    dateElement.setAttribute('data-month', month);
    dateElement.setAttribute('data-day', day);
    // 隐藏原始文本
    dateElement.style.textIndent = '-9999px';
    dateElement.style.position = 'relative';
  }
});

CSS部分：

.press-date:before {
  content: attr(data-day) "/" attr(data-month) "/" attr(data-year);
  position: absolute;
  left: 0;
  text-indent: 0;
}

注意事项： #

• 确保页面上的日期格式统一为YY/MM/DD，否则转换会出错
• 如果你的页面是动态加载内容（比如滚动加载更多新闻），需要在内容加载完成后重新执行转换脚本

内容的提问来源于stack exchange，提问作者Ziv Feldman