首页javascript动态改变网页字体大小body部分的代码

javascript动态改变网页字体大小body部分的代码

时间: 2024-09-26 11:18:46 浏览: 84

在JavaScript中，你可以通过操作`document.body.style.fontSize`属性来动态改变网页`<body>`元素的字体大小。下面是一个简单的例子： ```javascript // 获取body元素 var body = document.querySelector('body'); // 动态设置字体大小 function changeFontSize(newSize) { body.style.fontSize = newSize + 'px'; // 这里的单位可以是像素(px), em, rem等 } // 调用函数并传入新的字体大小，例如16px changeFontSize(16); ``` 在这个示例中，`changeFontSize`函数接受一个新的字体大小作为参数，并将其应用到页面的主体部分。如果你想让用户交互式地调整字体大小，还可以添加事件监听器： ```javascript // 添加点击事件监听器，当用户点击按钮时改变字体大小 var fontSizeButton = document.getElementById('fontsize-button'); fontSizeButton.addEventListener('click', function() { var newSizeInput = document.getElementById('new-font-size'); var newSize = newSizeInput.value; changeFontSize(newSize); }); ``` 这里假设有一个输入框(id为`new-font-size`)供用户输入新字体大小。

阅读全文