为了在您的博客文章页面添加一个让用户通过拖动按钮来调整文字大小的功能,我们可以按照以下步骤进行:
1.添加滑动条和相关HTML元素:
在文章内容区域附近添加一个滑动条,允许用户调整文字大小。

<span class="font-size-control">
    文字大小:
    <span class="size-text">小</span>
    <input type="range" min="14" max="24" value="16" class="size-slider" id="fontSizeSlider">
    <span class="size-text">大</span>
</span>

2.添加CSS样式:
为滑动条和文字添加一些样式,使其美观且易于使用。

<style>
    .font-size-control {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 15px 0;
    }
    .size-slider {
        width: 100px;
        margin: 0 10px;
    }
    .size-text {
        font-size: 16px;
        user-select: none;
    }
</style>

3.添加JavaScript逻辑:
使用JavaScript来监听滑动条的变化,并动态修改文章内容的字体大小。

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slider = document.getElementById('fontSizeSlider');
        const articleBody = document.querySelector('.article-body');
        const sizeTexts = document.querySelectorAll('.size-text');

        if (slider && articleBody) {
            slider.addEventListener('input', function() {
                const fontSize = this.value + 'px';
                articleBody.style.fontSize = fontSize;
                sizeTexts.forEach(text => text.style.fontSize = fontSize);
            });
        }
    });
</script>

4.将上述代码整合到您的页面中:
在部分或者合适的位置添加CSS样式。
在页面底部或者合适的位置添加JavaScript脚本。
这样,当用户拖动滑动条时,文章内容的文字大小会随之改变,并且滑动条两侧的A字符也会同步更新,以直观显示当前的字体大小。
注意事项:
确保article-body的类名在您的CSS中没有被其他样式覆盖。
您可能需要根据实际的页面布局来调整滑动条的样式和位置。
考虑用户体验,可以添加一个提示文字或图标,说明这个功能的用途。
如果您的网站支持移动设备,确保这个功能在触摸设备上也能正常工作。

5.但是到这一步调解的文字大小的时候可能大小两个指示字也会随之变动,于是我们调解一下js只让内容变动

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slider = document.getElementById('fontSizeSlider');
        const articleBody = document.querySelector('#docopy');

        if (slider && articleBody) {
            slider.addEventListener('input', function() {
                const fontSize = this.value + 'px';
                // 只改变 article-body 内的文字大小
                articleBody.style.fontSize = fontSize;
            });
        }
    });
</script>