Question

我有以下使用CORS协议注入的html。我使用email_ver_input - label下的ID为email_ver_input_label的输入。

<label id="email_ver_input_label" for="email_ver_input" style="display: inline;">Verification Code</label>
<input id="email_ver_input" type="text" placeholder="Verification Code" style="display: inline;" class="val-success"> 
<button id="email_ver_but_verify" class="verifyButton" type="button" style="display: inline;">Verify Code</button>
<button id="email_ver_but_edit" class="editButton" type="button" style="display:none">Change e-mail</button>
<button id="email_ver_but_default" class="defaultButton" type="button" style="display:none">Default</button>

我可以使用以下css规则轻松完成此操作：

#email_ver_input_label {
    display: block!important;
}

问题是，如果我设置!important，那么此标签将显示在之前的状态。之前的状态label具有style="display: none;"

有没有使用javascript来实现这个目标？这里有两个html状态的小提琴：

1 - https://jsfiddle.net/Bonomi/96kfqryy/

2 - https://jsfiddle.net/Bonomi/hgL0uuhn/1/

Answer 1

您可以使用position:absolute

来实现这一目标

body {
  position: relative
}
#email_ver_input {
  position: absolute;
  top: 30px;
  left: 0
}

<label id="email_ver_input_label" for="email_ver_input" style="display: inline;">Verification Code</label>
<input id="email_ver_input" type="text" placeholder="Verification Code" style="display: inline;" class="val-success">
<button id="email_ver_but_verify" class="verifyButton" type="button" style="display: inline;">Verify Code</button>
<button id="email_ver_but_resend" class="sendButton" type="button" style="display: inline;">Resend Code</button>
<button id="email_ver_but_edit" class="editButton" type="button" style="display:none">Change e-mail</button>
<button id="email_ver_but_default" class="defaultButton" type="button" style="display:none">Default</button>

在标签下输入而不更改html

1 个答案: