时间戳

首页 > 解决方案 > 如何检查css类是否在网站中实现？

html - 如何检查css类是否在网站中实现？

问题描述

我们正在做 POC，我们要求客户在网站上只添加脚本标签。脚本标签是指我们网站中的 javascript 文件。当我们的脚本标签被执行时，我们使用脚本标签的位置将 HTML 代码注入到父网站中。

我们注入的 HTML 代码包含在我们的站点中没有任何定义的 css 类，因此它从父站点获取基本 HTML 标记的继承 css。

问题是如何检查父站点是否在样式表文件中实现了类，以便如果父站点中没有定义类，那么我们可以为我们的类添加默认定义。

示例：假设我们注入的 HTML 代码片段包含以下 div。

<p>Property Details</p>

可以说父网站有css定义

像下面这样的标签

p
{
    font-size: 16px;
    font-weight: bold;
}

假设我们引用了我们自己的 css 文件路径，它也有定义

像下面

p
{
    background-color: yellow;
}

（注意：父站点的样式表引用总是在我们的 HTML 代码片段的样式表引用之上。）

在上述情况下的风格

字体大小应为 16px，字体粗细，在父站点 css 文件中定义。

但万一，父站点 css 文件没有定义

那么风格

应该是背景黄色，这是在我们的 HTML 代码片段中定义的。

标签： htmlcss

解决方案

您可以尝试这样的事情（正如 Cray 在评论中所建议的那样）

function isDefined(selector) {
  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    for (var j = 0; j < sheet.cssRules.length; j++) {
      return sheet.cssRules[j].selectorText == selector;
    }
  }
}

var styleElement = document.createElement("style");
styleElement.type = 'text/css';
document.head.appendChild(styleElement);

var myStylesheet = document.styleSheets[document.styleSheets.length - 1];

if (!isDefined("p")) {
  myStylesheet.insertRule("p { background-color: yellow; }")
}

if (!isDefined("h1")) {
  myStylesheet.insertRule("h1 { background-color: yellow; }")
}
p {
  font-size: 12px;
}
<h1>hello</h1>
<p>world</p>

这是一个简单的例子，但是如果你想处理客户端定义了一个p.class-name或div p选择器的情况，你需要扩展它。
请注意，由于这些选择器具有更高的优先级，因此客户端可以覆盖您的更改作为解决方法。

推荐阅读