如何修改JS数组随机生成输出文本的字体、字号等样式

你没法单独修改活动文本样式是两个原因导致的：一是HTML基础结构写重复了，二是输出内容时没有给活动文本单独加可定位样式的标签，另外你的点击逻辑还有顺序错误。 #

现有代码的错误点 #

• 一个HTML文件只需要1组<!DOCTYPE html>、<html>、<body>标签，你重复写了2组，会导致浏览器解析结构混乱
• 按钮onclick里的逻辑顺序写反了：你先把旧的随机活动值写入页面，才生成新的随机值，会出现每次点击显示的是上一次结果的问题
• 提示文字和活动名直接拼接成普通文本输出，没有给活动名单独包裹带类名的标签，自然没法单独控制它的字体、字号等样式

修正后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 按钮样式可按需调整 */
        .generate-button {
            padding: 8px 16px;
            cursor: pointer;
            font-size: 16px;
        }
        /* 提示文字样式 */
        .tip-text {
            font-size: 16px;
            color: #333;
        }
        /* 活动文本专属样式，所有字体、字号、颜色相关属性都写在这里 */
        .activity-item {
            font-size: 28px;
            font-weight: 700;
            color: #165DFF;
            font-family: sans-serif;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <button class="generate-button" onclick="showRandomActivity()">
        generate a fun activity:
    </button>

    <p id="demo"></p>

    <script>
        const activityList = ["activity 1", "activity 2", "activity 3"];
        function showRandomActivity() {
            // 先生成新的随机活动
            const randomActivity = activityList[Math.floor(Math.random() * activityList.length)];
            // 输出时用span标签包裹活动文本，绑定专属类名
            document.getElementById('demo').innerHTML = 
                `<span class="tip-text">Try this activity to improve your experience:</span>
                <span class="activity-item">${randomActivity}</span>`;
        }
    </script>
</body>
</html>

样式调整方法 #

你要修改活动文本的显示效果，只需要修改.activity-item类下的CSS属性即可：

• 调整字号：修改font-size的数值，数值越大文字越大
• 调整字体：修改font-family的取值，比如填"Arial"、"微软雅黑"等字体名
• 调整文字粗细：修改font-weight的取值，数值越大文字越粗
• 调整文字颜色：修改color的色值，支持英文颜色名、十六进制色值、rgb色值
• 其他文字效果比如文字阴影、下划线、字间距等，都可以在这个类下追加对应CSS属性实现

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