css 如何用javascript来wap标签和输入标签的位置？

tyu7yeag 于 2022-11-26 发布在 Java

关注(0)|答案(1)|浏览(133)

我在wordpress中使用elementor，我不能直接修改html，所以我需要在表单中用javascript（或css，如果可能的话）交换两个标签。
我在CSS中使用的代码：

input:focus > .elementor-field-label {
    border: 1px solid black !important;
    border-radius: 5px;
    transform: translate(0px, -20px);
    font-size: 14px;
}

因为标签的位置而无法工作。*

然后我尝试用javascript中的代码来完成这项工作：

$('label').each(function() {
   $(this).insertAfter($(this).nextAll('input:first'));
});

但不起作用 *

那么，我怎样才能做到这一点呢？

FIY：表单的此特定部分的结构如下：

<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100 elementor-field-required"> /*Using just the elementor-field-group*/
          <label for="form-field-name" class="elementor-field-label"> Texto </label>
          <input size="1" type="text" name="form_fields[name]" id="form-field-name" class="elementor-field elementor-size-sm  elementor-field-textual" required="required" aria-required="true">
     </div>

css

来源：https://stackoverflow.com/questions/74575425/how-can-i-wap-the-position-of-the-label-and-the-input-tag-with-javascript

1条答案

按热度按时间

mzmfm0qo1#

使用CSS，您可以执行以下操作：

.elementor-field-group {
  display: flex;
  flex-flow: column;
}

.elementor-field-group input {
  order: -1;
}

这不会改变HTML的结构，但在视觉上它们会交换位置。

使用Javascript，您可以这样做：

document.querySelectorAll('.elementor-field-group label').forEach((e) => {
    e.parentNode.appendChild(e)
})

这个脚本只是获取标签并将其再次追加到父级，因此它将是 Package 器的最后一个子级。
或者这样，在label之前添加input元素。如果 Package 器中有多于这两个元素，这将是更好的解决方案。

document.querySelectorAll('.elementor-field-group input').forEach((e) => {
  e.parentNode.insertBefore(e, e.previousElementSibling);
})

赞(0）回复(0）举报 2022-11-26

我来回答

css 如何用javascript来wap标签和输入标签的位置？

1条答案

相关问题

热门标签

最新问答