javascript - 根据其值隐藏文本框

Question

我有一个 Canvas ，可以在上面添加文本和图像层，在 Canvas 下方有几个文本框，在其中显示有关所选图层的信息。我显示的内容是:

• X 坐标
• Y 坐标
• 宽度
• 高度
• 字体
• 字体大小
• 字体颜色
• 标题
• Angular

现在，由于图像层没有字体、字体大小和字体颜色，因此现在将显示“未定义”。

我使用此 JavaScript 代码在文本框中显示信息:

document.getElementById('width').value = Math.round(layer.width*100)/100;
document.getElementById('height').value = Math.round(layer.height*100)/100;
document.getElementById('x').value = layer.offsetX;
document.getElementById('y').value = layer.offsetY;
document.getElementById('color').value = layer.fontColor;
document.getElementById('color').style.color=layer.fontColor;
document.getElementById('font').value = layer.fontFamily;
document.getElementById('size').value = layer.fontSize;
document.getElementById('title').value = layer.title;
document.getElementById('angle').value = Math.round(layer.angle*100)/100;

问题:
有没有办法隐藏文本框在包含“未定义”一词时消失？
另外，是否可以隐藏框前面的纯文本？ (字体:、大小:、颜色)

Canvas 的工作版本可以在 this codepen! 中找到。

Answer 1

您可以创建一个辅助函数，根据值 === 是否未定义来隐藏或显示元素:

function setElementValueById(id, value){
    var element = document.getElementById(id);
    if(element != null){
        element.style.display = value !== undefined ? '': 'none';
        element.value = value;
    }
}

// usage 
setElementValueById('font', layer.fontFamily);

编辑:

要隐藏标签，您可以将每个框及其标签分组在单个元素 (div) 内:

(基于您的 codepen 示例)

<td>
X:
<input id="x" type="number" onkeypress="return isNumber(event)" size="5">
Y:
<input id="y" type="number" onkeypress="return isNumber(event)" size="5">

变成:

<td>
 <div>X:
      <input id="x" type="number" onkeypress="return isNumber(event)" size="5">
 </div>
 <div>Y:
      <input id="y" type="number" onkeypress="return isNumber(event)" size="5">
 </div>

然后修改函数以显示/隐藏父div:

// Searches for the element with the given id and sets its value.
// If the value is strictly equal to 'undefined',
// the element's parent will be hidden.
function setElementValueById(id, value){
    var element = document.getElementById(id);
    if(element != null){
        element.parentElement.style.display = value !== undefined ? '': 'none';
        element.value = value;
    }
}

// usage 
setElementValueById('font', layer.fontFamily);