如何修改JS代码实现用户性别变更后自动匹配对应文字颜色

方案一：PHP直接渲染样式类（推荐） #

既然用户性别已存储在$_SESSION['gender']中，最简便可靠的方式是在页面渲染阶段就给<h1>添加对应样式类，无需JavaScript介入：

修改后的HTML代码 #

<?php
// 必须放在页面最顶部，开启会话
session_start();
// 校验性别值合法性，避免无效值导致样式失效
$validGenders = ['female', 'male'];
$userGender = in_array($_SESSION['gender'], $validGenders) ? $_SESSION['gender'] : 'male';
?>

<h1 id="gender" class="<?php echo $userGender; ?>">你的性别标题</h1>

保留原有CSS #

.female { color: pink; }
.male { color: blue; }

用户性别变更后，只要$_SESSION['gender']同步更新，刷新页面就会自动应用对应颜色，完全不需要额外处理。

方案二：JavaScript动态匹配（适用于无刷新场景） #

如果需要在不刷新页面的情况下更新样式，可以将PHP会话中的性别值传递给JavaScript，动态操作类名：

代码实现 #

<?php
session_start();
$validGenders = ['female', 'male'];
$userGender = in_array($_SESSION['gender'], $validGenders) ? $_SESSION['gender'] : 'male';
?>

<h1 id="gender">你的性别标题</h1>

<script>
const targetElement = document.getElementById('gender');
const userGender = '<?php echo $userGender; ?>';

// 先清除旧样式类，再添加新类，避免样式冲突
targetElement.classList.remove('female', 'male');
targetElement.classList.add(userGender);
</script>

如果后续性别通过AJAX等方式在前端动态更新，可以把添加类的逻辑封装成函数，在会话更新后调用即可同步样式。

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