增加/减少字体大小脚本 - 如何添加默认文本大小功能？

Does anybody know how to modify the below script so that, in addition to the two current functions (changeFontSize( id, true); //Increases the font size - changeFontSize( id ); // Decreases size), I can add a third function whereby the font size will be reset to a default setting?

有没有人知道如何修改下面的脚本,以便除了两个当前函数(changeFontSize(id,true); //增加字体大小 - changeFontSize(id); //减小大小),我可以添加第三个字体大小将重置为默认设置的功能?

Thank you, Chris

谢谢你,克里斯

SCRIPT

function changeFontSize( objId, doIncreaseSize ) { //Define your variables before use, or they will become global. var currentSize = 0, obj = document.getElementById( objId ), newVal = 0, limitMax = 10, limitMin = 0.5, unit = 0.1;

function changeFontSize(objId,doIncreaseSize){//在使用前定义变量,否则它们将变为全局变量。 var currentSize = 0,obj = document.getElementById(objId),newVal = 0,limitMax = 10,limitMin = 0.5,unit = 0.1;

if( !obj ){
 return false; //Avoids errors if obj isn't found.
}
currentSize = parseFloat( obj.style.fontSize );
if( doIncreaseSize ){
    unit = -unit; // unit becomes negative. This turns subtractions into addition.
}
newVal = currentSize - unit;
if( limitMax >= newVal && limitMin <= newVal ){
    obj.style.fontSize = newVal + "em";
}

};

2 个解决方案

#1

You will need to save the original font size (assuming it is not 1em) somewhere, like on the object itself or in an external array.

您需要在某处保存原始字体大小(假设它不是1em),例如在对象本身或外部数组中。

Something like this:

像这样的东西:

function changeFontSize(objId, doIncreaseSize) { 
  var currentSize = 0, obj = document.getElementById(objId), newVal = 0, limitMax = 10, limitMin = 0.5, unit = 0.1;
  if(!obj){
    return false;
  }
  currentSize = parseFloat( obj.style.fontSize );
  if (!obj.originalSize) { obj.originalSize = currentSize; }
  if(doIncreaseSize){
    unit = -unit;
  }
  newVal = currentSize - unit;
  if(limitMax >= newVal && limitMin <= newVal){
    obj.style.fontSize = newVal + "em";
  }
  return true;
}

function resetDefaultSize(objId) { 
  var obj = document.getElementById(objId);
  if(!obj){
   return false;
  }
  if (obj.originalSize) { obj.style.fontSize = obj.originalSize + "em"; }
  return true;
}

Notice your code will only work if the element has an explicitly defined font-size with units of em.

请注意,只有元素具有明确定义的字体大小且单位为em时,您的代码才有效。

#2

Taking what you have made, what you could do is that instead of using doIncreaseSize as a boolean, you could instead call that variable action and do

拿你所做的,你可以做的是,而不是使用doIncreaseSize作为布尔值,你可以改为调用该变量动作并做

...
if (action == 'sub') {
    unit = -unit;
}
newVal = currentSize - unit;
if (action == 'def') {
    newVal = some_default_value;
}
...

But the real question here is why are you doing this in the first place? It would probably be a lot easier just setting the value instead of increasing and decreasing, unless you plan to make a button that the user can click to increase and decrease the text size of your webpage. But like posted in the comments, that can be done in the browser directly.

但这里真正的问题是你为什么要这样做呢?设置值而不是增加和减少可能要容易得多,除非您打算创建一个用户可以单击以增加和减少网页文本大小的按钮。但就像在评论中发布的那样,可以直接在浏览器中完成。

#1