时间戳

首页 > 解决方案 > 如何检查 CSS 选择器是否在同一个 HTML 标记行上

javascript - 如何检查 CSS 选择器是否在同一个 HTML 标记行上

问题描述

如果不使用document.querySelectoror document.querySelectorAll，我如何检查 CSS 选择器是否在同一 HTML 行上。

let tag = "div";
let id = "some_id"
let classs = "another_class"

if (document.getElementsByTagName(CSS.escape(tag)) || document.getElementById(CSS.escape(id)) || document.getElementsByClassName(CSS.escape(classs))) {
  console.log("cool");
} else {
  console.log("not cool");
}
<div id="some_id" class="some_class some_other_class"></div>
<img class="another_class"></img>

它应该返回not cool，因为 CSS 选择器不在同一行，而如果我使用选择器div#some_id.some_class，它会返回cool.

标签： javascripthtmlcss

解决方案

首先解析ID，因为它是唯一的，然后将其他资格与它进行比较。

let tag = "div";
let id = "some_id"
let classs = "another_class";

let idMatch = document.getElementById(CSS.escape(id));

if (idMatch &&
    idMatch.tagName == tag.toUpperCase() &&
    idMatch.classList.contains(classs) ) {
  console.log("cool");
} else {
  console.log("not cool");
}
<div id="some_id" class="some_class some_other_class"></div>
<img class="another_class"></img>

推荐阅读