英文:
Font size changing buttons
问题
I see that you're trying to implement font size adjustment buttons on a website using JavaScript. Here's the translated code you provided:
我尝试在网站上实现按钮，以允许用户增加/减小字体大小。
这是网站链接：https://font-size-d27117.webflow.io/
我在字体和图像上都使用REM。我想只更改字体大小，而不更改图像。
我找到了脚本。它似乎很简单，但不起作用。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#font-size-plus').on('click', function()
{
var fontSize = $('body').css('font-size');
console.log(fontSize);
var newFontSize = parseInt(fontSize) + 1;
$('body').css('font-size', newFontSize + 'px')
})
$('#font-size-minus').on('click', function()
{
var fontSize = $('body').css('font-size');
var newFontSize = parseInt(fontSize) - 1;
$('body').css('font-size', newFontSize + 'px')
})
$('#_reset').on('click', function() {
$('body').css('font-size', '1')
})
</script>
在上面的脚本中，我看到了px，而不是rems。
我尝试将PX更改为REM，并从1px更改为0.1rem
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#font-size-plus').on('click', function()
{
var fontSize = $('body').css('font-size');
console.log(fontSize);
var newFontSize = parseFloat(fontSize) + 0.1;
$('body').css('font-size', newFontSize + 'rem')
})
$('#font-size-minus').on('click', function()
{
var fontSize = $('body').css('font-size');
var newFontSize = parseFloat(fontSize) - 0.1;
$('body').css('font-size', newFontSize + 'rem')
})
$('#_reset').on('click', function() {
$('body').css('font-size', '1rem')
})
</script>
这些脚本都不起作用。
有人可以帮忙吗？
Please note that I've translated the code for you. If you have any specific questions or need further assistance with this code, feel free to ask.
英文:
I'm trying to implement buttons in order to allow users to increase/decrease font size on a website.
This is the website: https://font-size-d27117.webflow.io/
I use REM everywhere, for font and for images. I'd like to change only font sizes, but not images.
I've found the script. It seems to be simple but doesn't work.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#font-size-plus').on('click', function()
{
var fontSize = $('body').css('font-size');
console.log(fontSize);
var newFontSize = parseInt(fontSize) + 1;
$('body').css('font-size', newFontSize + 'px')
})
$('#font-size-minus').on('click', function()
{
var fontSize = $('body').css('font-size');
var newFontSize = parseInt(fontSize) - 1;
$('body').css('font-size', newFontSize + 'px')
})
$('#_reset').on('click', function() {
$('body').css('font-size', '1')
})
</script>
In the above script I see px instead of rems.
I tried to change PX to REM and step from 1px to 0.1rem
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#font-size-plus').on('click', function()
{
var fontSize = $('body').css('font-size');
console.log(fontSize);
var newFontSize = parseInt(fontSize) + 0.1;
$('body').css('font-size', newFontSize + 'rem')
})
$('#font-size-minus').on('click', function()
{
var fontSize = $('body').css('font-size');
var newFontSize = parseInt(fontSize) - 0.1;
$('body').css('font-size', newFontSize + 'rem')
})
$('#_reset').on('click', function() {
$('body').css('font-size', '1' + 'rem')
})
</script>
None of these scripts work.
Could anyone help?
答案1
得分: 0
你有两个主要问题：
- 事件处理程序没有被添加，因为脚本立即运行，但当它运行时，+/-按钮元素还不存在。解决方法是将你的 jQuery 代码包装在
$(() => { ... })中，这会使它在DOM加载后才运行。 - 你设置了
body的字体大小，而不是html的字体大小。rem单位基于根大小，对于HTML文档来说，根元素是html。
你的代码中还有一些其他问题（无效的HTML等），但下面是一个简化的版本可以工作：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(() => {
$('#font-size-plus').on('click', function() {
var fontSize = $('html').css('font-size');
var newFontSize = parseInt(fontSize) + 1;
$('html').css('font-size', newFontSize + 'px');
});
$('#font-size-minus').on('click', function() {
var fontSize = $('html').css('font-size');
var newFontSize = parseInt(fontSize) - 1;
$('html').css('font-size', newFontSize + 'px');
});
$('#_reset').on('click', function() {
$('html').css('font-size', '16px');
});
});
<!-- language: lang-css -->
.font-16px {
font-size: 16px;
}
.font-1rem {
font-size: 1rem;
}
.font-2rem {
font-size: 2rem;
}
.font-3rem {
font-size: 3rem;
}
<!-- language: lang-html -->
<html style="font-size: 16px">
<head>
<meta charset="utf-8">
<title>font size</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="font-16px">
<button id="font-size-plus">+</button>
<button id="font-size-minus">-</button>
<button id="_reset">Reset</button>
</div>
<div class="font-1rem">1 rem</div>
<div class="font-2rem">2 rem</div>
<div class="font-3rem">3 rem</div>
</body>
</html>
<!-- end snippet -->
请注意，设置html的字体大小会影响所有使用rem值的测量，无论它们是字体大小、图像等等。你可以在控制按钮本身所在的div中看到这个区别，它将其字体大小设置为px，因此始终保持相同的字体大小。
英文:
You have 2 main problems:
- The event handlers aren't getting added, as the script runs immediately but the +/- button elements aren't present when it runs. The fix is to wrap your jQuery code in
$(() => { ... }), which causes it to run only once the DOM is loaded. - You're setting the font size of
body, nothtml.remunits are based on the root size, which for an HTML document is thehtmlelement.
There are a few other issues in your code (invalid HTML etc.), but here's a simplified version that works:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(() => {
$('#font-size-plus').on('click', function() {
var fontSize = $('html').css('font-size');
var newFontSize = parseInt(fontSize) + 1;
$('html').css('font-size', newFontSize + 'px');
});
$('#font-size-minus').on('click', function() {
var fontSize = $('html').css('font-size');
var newFontSize = parseInt(fontSize) - 1;
$('html').css('font-size', newFontSize + 'px');
});
$('#_reset').on('click', function() {
$('html').css('font-size', '16px');
});
});
<!-- language: lang-css -->
.font-16px {
font-size: 16px;
}
.font-1rem {
font-size: 1rem;
}
.font-2rem {
font-size: 2rem;
}
.font-3rem {
font-size: 3rem;
}
<!-- language: lang-html -->
<html style="font-size: 16px">
<head>
<meta charset="utf-8">
<title>font size</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="font-16px">
<button id="font-size-plus">+</button>
<button id="font-size-minus">-</button>
<button id="_reset">Reset</button>
</div>
<div class="font-1rem">1 rem</div>
<div class="font-2rem">2 rem</div>
<div class="font-3rem">3 rem</div>
</body>
</html>
<!-- end snippet -->
Note that setting the font size on html affect all measurements that use rem values, regardless of whether they're font sizes, images, etc. You can see this difference in the div housing the control buttons themselves, which sets its font size in px instead so always remains at the same font size.
答案2
得分: 0
我已经实施了 @Lionel Rowe 的建议。
似乎有效。
最终效果：font-size-d27117.webflow.io
英文:
I've implemented @Lionel Rowe advice.
IT seems to work.
Final effect: font-size-d27117.webflow.io
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论