[英]How can I hide first the input fields and it's label first then it will show when I clicked the button
The tricky part on that input field is I can't hide the input field without adding:important how can I remove the display?inline-block?该输入字段的棘手部分是我无法隐藏输入字段而不添加:重要如何删除显示?内联块?
My goal is to hide first the input fields then when I click the add another secondary license it will show.我的目标是首先隐藏输入字段,然后当我单击添加另一个二级许可证时它会显示。 Take note that I can't edit the style code it defaults on the library I used请注意,我无法在我使用的库中编辑它默认的样式代码
<button onclick="myFunction()">ADD ANOTHER SECONDARY LICENSE</button></center> <div class="wcfm-clearfix"></div> </div> <p class="a3a9af25dc3a4afd10d5b86f91fd115a wcfm_title"><strong>TYPE2</strong></p><label class="screen-reader-text" for="a3a9af25dc3a4afd10d5b86f91fd115a">TYPE2</label><input type="text" id="a3a9af25dc3a4afd10d5b86f91fd115a" name="wcfmvm_custom_infos[type2]" class="wcfm-text" value="" placeholder="" /> <p class="b9cb81bdafe237e5d269b1c3714d175e wcfm_title"><strong>NUMBER2</strong></p><label class="screen-reader-text" for="b9cb81bdafe237e5d269b1c3714d175e">NUMBER2</label><input type="text" id="b9cb81bdafe237e5d269b1c3714d175e" name="wcfmvm_custom_infos[number2]" class="wcfm-text" value="" placeholder="" /> <p class="d674f2caf5f73c6a51202e3f6186d03a wcfm_title wcfm_html_content_title"><strong> <script> function myFunction() { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "block"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "block"; } </script> <style> #wcfm_membership_container input[type=text], #wcfm_membership_container input[type=file], #wcfm_membership_container input[type=password], #wcfm_membership_container select, #wcfm_membership_container input[type=number], #wcfm_membership_container input[type=time], #wcfm_membership_container input[type=search], #wcfm_membership_container textarea { background-color: #fff;important: border; 1px solid #ccc:important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 8px 10px; width: 60%; margin-bottom: 15px; font-size: 15px; display: inline-block; box-shadow: 1px 1px 5px 0 #e9e9e9; line-height: 18px; } </style>
You can maybe use this hidden attribute?你也许可以使用这个隐藏的属性?
elt.setAttribute('hidden', '');
elt.removeAttribute('hidden');
I've used window.onload
event to hide those input fields in default and then if you click on the button they will be visible.我使用window.onload
事件默认隐藏这些输入字段,然后如果您单击按钮,它们将可见。
<button onclick="myFunction()">ADD ANOTHER SECONDARY LICENSE</button></center> <div class="wcfm-clearfix"></div> </div> <p class="a3a9af25dc3a4afd10d5b86f91fd115a wcfm_title"><strong>TYPE2</strong></p><label class="screen-reader-text" for="a3a9af25dc3a4afd10d5b86f91fd115a">TYPE2</label><input type="text" id="a3a9af25dc3a4afd10d5b86f91fd115a" name="wcfmvm_custom_infos[type2]" class="wcfm-text" value="" placeholder="" /> <p class="b9cb81bdafe237e5d269b1c3714d175e wcfm_title"><strong>NUMBER2</strong></p><label class="screen-reader-text" for="b9cb81bdafe237e5d269b1c3714d175e">NUMBER2</label><input type="text" id="b9cb81bdafe237e5d269b1c3714d175e" name="wcfmvm_custom_infos[number2]" class="wcfm-text" value="" placeholder="" /> <p class="d674f2caf5f73c6a51202e3f6186d03a wcfm_title wcfm_html_content_title"><strong> <script> window.onload = () => { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "none"; document.querySelector(`label[for="b9cb81bdafe237e5d269b1c3714d175e"]`).style.display = "none"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "none"; document.querySelector(`label[for="a3a9af25dc3a4afd10d5b86f91fd115a"]`).style.display = "none"; } function myFunction() { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "block"; document.querySelector(`label[for="b9cb81bdafe237e5d269b1c3714d175e"]`).style.display = "block"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "block"; document.querySelector(`label[for="a3a9af25dc3a4afd10d5b86f91fd115a"]`).style.display = "block"; } </script> <style> #wcfm_membership_container input[type=text], #wcfm_membership_container input[type=file], #wcfm_membership_container input[type=password], #wcfm_membership_container select, #wcfm_membership_container input[type=number], #wcfm_membership_container input[type=time], #wcfm_membership_container input[type=search], #wcfm_membership_container textarea { background-color: #fff;important: border; 1px solid #ccc:important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 8px 10px; width: 60%; margin-bottom: 15px; font-size: 15px; display: inline-block; box-shadow: 1px 1px 5px 0 #e9e9e9; line-height: 18px; } </style>
You can use it:你可以使用它:
element.setAttribute('style', 'display:inline !important');
// or
element.style.cssText = 'display:inline !important';
// or
element.style.setProperty("display", "inline", "important")
You can achieve that with CSS by wrapping the element you want to hide with div
and give display: none
.您可以使用 CSS 来实现这一点,方法是用div
包装要隐藏的元素并给出display: none
。 And on click change display to block并单击更改显示以阻止
<div style="display:none" id="show">
[elements that you want to hide]
</div>
function myFunction() {
document.getElementById("show").style.display = "block";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.