Question

假设ignore元素在该元素的末尾具有伪元素input，并且此后有一个按钮，即{{之间有伪元素::after 1}}元素和一个::after元素。例如，请看下面的图片-

在上面的示例中，单击input后，一段时间后，button被更改，button伪元素消失了。

如何检测输入中是否包含input？

Answer 1

您可以使用<!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head> <link rel="stylesheet" type="text/css" href="static/css/timeTable.css" th:href="@{/css/timeTable.css}"> <meta charset="UTF-8"> <title>Time Table</title> </head> <body> <form action="#" th:action="@{/timeTable/save}" th:object="${timeTable}" method="post"> <div class="grid-container"> <div class="year"><h1><input style="font-size:40px;" type="text" th:field="*{year}" readonly="readonly"/></h1></div> <div class="Semester"><h1>Semester</h1></div> <div class="sem"><h1><input style="font-size:40px;" type="text" th:field="*{semester}" readonly="readonly"/></h1></div> <div class="TimeTable"><h1>Time Table for</h1></div> <div class="StudentGroup"> <h1>Student Group</h1></div> <div class="CS2"><h1><input style="font-size:40px;" type="text" th:field="*{group_code}" readonly="readonly"/></h1></div> </div> </form> <div class="container" style="margin-top:30px"> <br><br> <form action="#" th:action="@{/timeTable/save}" th:object="${timeTable}" method="post"> <table border="1" > <thead> <tr> </tr> <br> <th></th> <th:block th:each="day : ${days}"> <th th:text="${day.name}"></th> </th:block> </thead> <tbody> <th:block th:each="time : ${times}"> <tr> <th th:text="${ time.start }+':00 - ' + ${ time.end }+':00'"></th> <th:block th:each="day : ${days}"> <td> <select th:field="*{subject_code}"> <option value=""></option> <option th:each="subject: ${subjects}" th:value="${subject.subject_code}" th:text="${subject.name}"/> </select> </td> </th:block> </tr> </th:block> <tr> <td><input type="hidden" th:field="*{id}" readonly="readonly"/></td> </tr> <tr> <td><input type="hidden" th:field="*{group_code}" readonly="readonly"/></td> </tr> <tr> <td><input type="hidden" th:field="*{year}" readonly="readonly"/></td> </tr> <tr> <td><input type="hidden" th:field="*{semester}" readonly="readonly"/></td> </tr> <tr> <td colspan="2"> <button type="submit">Save</button> </td> </tr> </tbody> </table> </form> </div> </body> </html>来获取getComputedStyle(el, '::after').content伪元素的内容（它也适用于::after）。如果内容不是::before，则存在伪元素。

none

const hasAfter = selector => {
  const el = document.querySelector(selector);
   
  return getComputedStyle(el, '::after').content !== 'none';
}


console.log(hasAfter('.has')); // true
console.log(hasAfter('.hasnt')); // false

.has::after {
  content: 'after';
}

如何检测元素是否具有:: after（伪元素）？

1 个答案: