使用Javascript更改html可见性

Using Javascript to change html visibility

本文关键字：可见性 html 更改 Javascript 使用      更新时间：2023-09-26

我看过许多不同的问答；A试图找到一个我可以修改的答案，以适应我正在尝试做的事情。我有一个表格，它将用于一家公司内对同一表格有不同要求的不同"单位"。我试图使用JS（不使用jQuery）根据选择的"单位"编号来更改几个表格行的可见性。

选择框部分：

<tr>
    <td class="left"><span class="required">*</span>Store Number:</td>
    <td>
        <select id="storenumber" name="storenumber" required title="Please select your store ID number" onChange="salad()">
            <option value="">Select Store Number</option>
            <option value="010576">010576</option>
            <option value="011169">011169</option>
            <option value="008181">008181</option>
            <option value="010324">010324</option>
            <option value="008615">008615</option>
            <option value="009150">009150</option>
            <option value="014640">014640</option>
            <option value="010684">010684</option>
            <option value="011168">011168</option>
            <option value="014215">014215</option>
            <option value="008179">008179</option>
            <option value="008339">008339</option>
            <option value="008668">008668</option>
            <option value="031574">031574</option>
        </select>
    </td>
</tr>

对于某些"单位"应隐藏的表行：

<tr id="frig1" style="visibility: hidden;">
    <td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
    <td><input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>
<tr id="frig2">
    <td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
    <td><input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>
<tr id="frig3">
    <td class="left"><span class="required">*</span>Refrigeration Unit #3:</td>
    <td><input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>

我尝试过的JavaScript函数：

function salad() {
    var storenumber = document.getElementById("storenumber");
    switch(storenumber.value) {
        case "010576":
            document.getElementById("frig1").style.value = "visible";
            break;
        case "011169":
            break;
        case "008181":
            document.getElementById("frig1").style.value = "visible";
            break;
        case "010324":
        case "008615":
        case "009150":
            break;  
    }
}

我甚至试着去W3Schools寻找答案，但他们使用的例子不适用于我的表单。

您调用了错误的方法。

试着。。。

document.getElementById("frig1").style.visibility = 'visible'

这是visibility属性的语法：

visibility: visible|hidden|collapse|initial|inherit;

这些工作吗？

document.getElementById("frig1").style.display = 'none'

和

document.getElementById("frig1").style.display = 'block'

您需要指定document.getElementById(...).style.visibility并切换hidden与visible而非值。您可能想要使用display: block和display: none，因为它们将从视图中完全删除该行，而可见性将隐藏该行，同时保持其在页面上的空间。

您可以尝试使用document.getElementById（"frig1"）.style.visibility="hidden"；--隐藏元素

以及document.getElementById（"frig1"）.style.visibility="visible"；--使元素可见

希望这将对有所帮助

document.getElementById('domElementId').style.visibility = "visible" ;
document.getElementById('domElementId').style.visibility = "hidden" ;

内联样式具有最高优先级，这可能会在其他情况下产生问题。相反，我们可以有一个类，并使用js 添加它

CSS

.showMenu{
visibility:visible;
}
.hideMenu{
visibility:hidden;
}

JS更改

document.getElementById('domElementId').classList.add("showMenu");
document.getElementById('domElementId').classList.remove("hideMenu");

请参阅http://jsfiddle.net/hLyvhd91/1/

var element_to_hide = document.getElementById("row2");
element_to_hide.style.visibility = 'hidden';
//element_to_hide.style.display = 'none';
console.log(element_to_hide.style.visibility);
相关文章：