javascript - 使用 Limit 调整文本大小？ Javascript

我正在处理文本大小调整元素，它会调整内容大小，工作正常，但我如何设置最大和最小限制？这是脚本:

<script>

    function increase()
    {

        obj = document.getElementById("content");
        currentSize = parseFloat(obj.style.fontSize); 
        obj.style.fontSize = (currentSize + 50) + "%";
    }

增加功能会将#content font-size 增加之前大小的150% .#content font-size 不能超过300%

function decrease()
{

    obj = document.getElementById("content");
    currentSize = parseFloat(obj.style.fontSize);
    obj.style.fontSize = (currentSize - 50) + "%";
}

减少功能会将#content font-size 减少到之前大小的三分之二 .#content font-size 不得低于25%

    function reset()
    {
        document.getElementById("content").style.fontSize = "100%";
    }
</script>

此函数将#content 字体大小重置回 100%

这是正文

<body>
    <div id = "main">
        <div id = "top">
            <ul id = "controls">
                <li><button onclick = "decrease()">A-</button></li>
                <li><button onclick = "reset()">A</button></li>
                <li><button onclick = "increase()">A+</button></li>
            </ul>
            <div class = "push"></div>
        </div>
        <div id = "content" style = "font-size: 100%;">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta facilisis luctus. Nulla lorem est, laoreet vitae lectus ac, luctus facilisis nibh. Morbi sit amet augue orci. Sed tristique viverra libero, a hendrerit lacus feugiat vel. Proin egestas fermentum turpis eu facilisis. Duis lacus justo, bibendum eu massa eget, ornare bibendum odio. Ut efficitur tempor bibendum. Mauris placerat neque purus, non molestie lorem eleifend sit amet. Ut euismod tortor ut neque ultrices lobortis. Maecenas placerat nunc massa, non molestie nisl fermentum sit amet. Fusce metus diam, maximus ut sem ut, lacinia lacinia nisi.</p>
            <p>Phasellus in dolor rhoncus, dignissim eros eu, suscipit velit. Donec malesuada nisl vel risus bibendum egestas. Cras rutrum ornare dui id pharetra. Donec eros dui, porta finibus massa ut, venenatis viverra nibh. Donec quis felis eget dolor feugiat faucibus vel eget erat. Duis tristique, dui non lobortis euismod, nisi libero fermentum velit, rutrum convallis sapien purus ac arcu. Sed egestas massa et convallis tincidunt. Sed pretium nisl eget blandit condimentum.</p>
            <p>Nullam in neque ut libero gravida molestie eget eu nibh. Curabitur varius ullamcorper neque, eget iaculis est volutpat sed. Praesent ultrices lectus sed nunc blandit, sed aliquam justo volutpat. Suspendisse potenti. Aliquam nec sapien tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque pulvinar libero quis quam rhoncus tincidunt. Ut dapibus sem sed enim rutrum, id viverra eros placerat. Morbi vulputate, odio iaculis molestie pellentesque, augue ex cursus massa, nec placerat sem arcu vitae libero. Donec gravida mi in metus sollicitudin, sed dictum sapien tempor. Curabitur vel rhoncus leo. Phasellus ut urna tempus arcu finibus auctor. In eu arcu ut nibh consequat ultrices. Fusce nec orci eget urna venenatis volutpat. Etiam ultricies leo id dolor interdum, nec luctus ex pretium. Phasellus ac leo quam.</p>
        </div>
        <div id = "bottom">
            <ul>
                <li>Copyright &copy 2015</li>
                <li>All rights reserved.</li>
            </ul>
        </div>
    </div>
</body>

最佳答案

根据你的代码，我会在你的函数之外声明一些变量作为限制，然后在执行增加或减少之前使用检查将值保持在这个限制。

var upperLimit = 500;
var lowerLimit = 50;

// ...snippet...
newSize = currentSize + 50;
if (newSize < upperLimit) {
     obj.style.fontSize = newSize + "%";
}

关于javascript - 使用 Limit 调整文本大小？ Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32577891/

javascript - 使用 Limit 调整文本大小？ Javascript

上一篇：javascript - 使图像同时调整大小和链接

下一篇：CSS3 媒体查询错误