个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
抱歉，如果标题没有解释清楚，我有这个页面，有两个按钮和一个文本 block ，一个用于增加文本的大小，另一个用于减小文本的大小。当文本达到最大或最小大小时，我想禁用每个按钮。例如:
单击“变大”按钮，如果文本达到最大尺寸，则禁用该按钮。单击“更小”按钮，如果文本达到最小大小，则禁用该按钮。
我尝试在 onclick 函数中使用下一个 if 语句:
if(currentSize== "66.6667pt"){bigger.disabled=true;}
其中 66.6667pt 是文本在保持固定之前达到的大小。另一种情况，最小尺寸为 6.75pt。
我不知道是否有更好的方法来验证文本是否达到其最小/最大大小，但我这样做是行不通的，“更大”按钮第二次被禁用文本达到 66.6667pt，“更小”按钮永远不会被禁用。
这是整个 html:
<!DOCTYPE html>
<html>
<head lang="es">
<title>Find Bug Script</title>
<meta charset="utf-8">
<style>
</style>
<script>
window.onload=function(){
var smaller = document.getElementById("smaller");
var hello = document.getElementById("hello");
if(!hello.style.fontSize){hello.style.fontSize="12pt";}
var factor=0.75;
bigger.onclick=function(){
var currentSize=hello.style.fontSize;
if(currentSize== "66.6667pt"){bigger.disabled=true;}
var csz = parseInt(currentSize.replace("24pt", ""));
if(csz > 60) return;
csz/=factor;
hello.style.fontSize= csz+"pt";
}
smaller.onclick=function(){
if(hello.style.fontSize== "6.75pt"){smaller.disabled=true;}
var currentSize=hello.style.fontSize;
var csz = parseInt(currentSize.replace("24pt", ""));
if(csz <= 6) return;
csz*=factor;
hello.style.fontSize= csz+"pt";
}
};
</script>
</head>
<body>
<input type=button value="Bigger" id="bigger"/>
<input type=button value="Smaller" id="smaller" />
<h1 id="hello" maxlength="5">¡Hello!</h1>
</body>
这是我的第一个 HTML/JS 类(class)，所以，让我们试着学好它。感谢您的宝贵时间!
最佳答案
直接对 fontSize 属性进行数学计算有点困惑。
我不会每次都尝试读出文本大小，而是在我的 javascript 代码中保留一个“stepper”变量，它会跟踪您所使用的字体大小“step”。然后我将步进器中的存储值插入某个公式以得出最终的字体大小。要限制大小，您可以确保“步长”高于或低于特定值。
像这样:
var factor = 0.75;
var step = 0;
bigger.onclick = function() {
step++;
step = Math.min(step, 4) // Step can never go above 4
reloadText();
}
smaller.onclick = function() {
step--;
step = Math.max(step, -4) // Step can never go below -4
reloadText();
}
function reloadText() {
// 14 is the default size, in points.
// If step is equal to zero, there will be no change in size.
// If step is below zero, the font will be smaller.
// If step is above zero, the font will be larger.
var size = 14 + (step*factor);
hello.style.fontSize= size+"pt";
if (step >= 4) {
// Disable "bigger" button
} else {
// Enable "bigger" button
}
if (step <= -4) {
// Disable "smaller" button
} else {
// Enable "smaller" button
}
}
关于javascript - 当文本达到最小/最大大小时，使用 JavaScript 禁用 HTML 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21921431/
24
4
0
我是一名优秀的程序员,十分优秀！