如何使文本框1更改文本框2中文本的字体大小。类似于在google docs或Microsoft word中更改字体大小

要实现文本框1更改文本框2中文本的字体大小的功能，可以通过以下步骤来完成：

基础概念

DOM操作：通过JavaScript操作HTML文档对象模型（DOM）来修改元素的属性。
事件监听：为文本框1添加事件监听器，以便在用户输入时触发相应的操作。
样式修改：使用JavaScript动态修改文本框2中文本的CSS样式。

类型与应用场景

类型：这是一个典型的前端交互功能。
应用场景：适用于需要实时调整界面元素样式的各种Web应用，如在线文档编辑器、内容管理系统等。

实现步骤与示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Size Changer</title>
</head>
<body>
    <label for="fontSizeInput">字体大小:</label>
    <input type="number" id="fontSizeInput" min="8" max="72">
    <br><br>
    <textarea id="textArea" rows="10" cols="50">这是一个示例文本。</textarea>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const fontSizeInput = document.getElementById('fontSizeInput');
    const textArea = document.getElementById('textArea');

    fontSizeInput.addEventListener('input', function() {
        const newSize = fontSizeInput.value;
        textArea.style.fontSize = newSize + 'px';
    });
});

解释

HTML部分：
- 创建了一个数字输入框（fontSizeInput）用于输入字体大小。
- 创建了一个文本区域（textArea）用于显示和编辑文本。

JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取fontSizeInput和textArea元素的引用。
- 为fontSizeInput添加input事件监听器，每当用户更改输入值时，更新textArea的fontSize样式。