首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何检查css类是否在网站中实现?

问如何检查css类是否在网站中实现?
EN

Stack Overflow用户
提问于 2019-05-08 06:05:18
回答 1查看 857关注 0票数 0

我们正在做POC,在POC中,我们要求客户端只在那里添加脚本标签。脚本标记引用我们网站中的javascript文件。当我们的脚本标记被执行时,我们使用脚本标记的位置将HTML代码注入父网站。

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

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

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

代码语言:javascript
复制
<p>Property Details</p>

让我们假设父站点有css定义

标签如下所示

代码语言:javascript
复制
p
{
    font-size: 16px;
    font-weight: bold;
}

并且假设我们引用了自己的css文件路径,该文件路径也具有

就像下面

代码语言:javascript
复制
p
{
    background-color: yellow;
}

(注:父站点的样式表引用总是在我们的HTML代码片段的样式表引用之上。)

在上述情况下的风格

字体大小为16 is,字体权重为粗体,在父站点css文件中定义。

但是,如果父站点css文件没有定义

然后风格

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

EN

回答 1

Stack Overflow用户

发布于 2019-05-08 07:43:16

您可以尝试这样的方法(如Cray在评论中所建议的)。

​

代码语言:javascript
复制
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; }")
}
代码语言:javascript
复制
p {
  font-size: 12px;
}
代码语言:javascript
复制
<h1>hello</h1>
<p>world</p>

​

这是一个简单的示例,但如果要处理客户端定义p.class-name或div p选择器的情况,则需要对其进行扩展。

注意,由于这些选择器具有更高的优先级,因此客户端可以重写您的更改作为解决办法。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56034464

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档