Angular 15+中勾选复选框时如何修改垂直时间线的CSS高度？

需求说明 #

勾选指定复选框时，动态调整垂直时间线（.timeline:before元素）的高度百分比值。

解决方案步骤 #

1. 优化HTML结构 #

给每个复选框添加data-height属性存储对应高度值，同时将复选框改为单选按钮（统一name属性）避免多选冲突：

<div class="container">
    <div class="page-header">
        <h1 id="timeline">Timeline</h1>
        <ul>
          <li><input type="radio" name="timelineHeight" data-height="8%">height 8%</li>
          <li><input type="radio" name="timelineHeight" data-height="25%">height 25%</li>
          <li><input type="radio" name="timelineHeight" data-height="38%">height 38%</li>
          <li><input type="radio" name="timelineHeight" data-height="53%">height 53%</li>
          <li><input type="radio" name="timelineHeight" data-height="72%">height 72%</li>
          <li><input type="radio" name="timelineHeight" data-height="100%" checked>height 100%</li>
        </ul>
    </div>
    <ul class="timeline">
        <li>
          <div class="timeline-badge"><button><i class="fa fa-times"></i></button></div>
          <div class="timeline-panel">
            <p>Sponsor Approval</p>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-badge"><button><i class="fa fa-times"></i></button></div>
          <div class="timeline-panel">
            <p>Initial Payment</p>
          </div>
        </li>
        <li>
          <div class="timeline-badge"><button><i class="fa fa-times"></i></button></div>
            <div class="timeline-panel">
            <p>HR Approved Date</p> 
            </div>
        </li>
        <li class="timeline-inverted">
            <div class="timeline-badge"><button><i class="fa fa-times"></i></button></div>
            <div class="timeline-panel">
            <p>Manager Approved Date</p>
            </div>
        </li>
        <li>
          <div class="timeline-badge"><button><i class="fa fa-times"></i></button></div>
            <div class="timeline-panel">
            <p>Letter of intent</p> 
            </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-badge"><button><i class="fa fa-times"></i></button></div>
          <div class="timeline-panel">
          <p>Final Offer Leter</p>
          </div>
        </li>
    </ul>
</div>

2. 补充CSS类（可选） #

如果偏好通过CSS类控制高度，可添加对应类：

/* 原有CSS代码保持不变 */
.timeline.h8:before { height: 8%; }
.timeline.h25:before { height: 25%; }
.timeline.h38:before { height: 38%; }
.timeline.h53:before { height: 53%; }
.timeline.h72:before { height: 72%; }
.timeline.h100:before { height: 100%; }

3. 编写JavaScript逻辑 #

监听单选按钮变化，实时更新时间线高度：

const heightRadios = document.querySelectorAll('input[name="timelineHeight"]');
const timeline = document.querySelector('.timeline');

// 初始化默认高度
timeline.querySelector(':before').style.height = '100%';

// 添加事件监听
heightRadios.forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.checked) {
            // 方式1：直接修改内联样式
            timeline.querySelector(':before').style.height = this.dataset.height;
            
            // 方式2：通过CSS类切换（需先定义对应类）
            // timeline.classList.remove('h8', 'h25', 'h38', 'h53', 'h72', 'h100');
            // timeline.classList.add(`h${this.dataset.height.replace('%', '')}`);
        }
    });
});

效果说明 #

• 单选按钮确保每次仅能选择一个高度，避免逻辑冲突；
• 借助原有CSS的transition: all 0.3s属性，高度变化会呈现平滑过渡效果；
• data-height属性直观存储高度值，便于JavaScript读取和维护。

内容的提问来源于stack exchange，提问作者Rushabh Panbude