Question

我不知道如何找到此元素样式代码的来源。例如，在Chrome Element Inspector Tool的右侧，它显示了这个CSS代码：

element.style {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 486px;
    height: 200px;
    overflow: hidden;
    -webkit-user-select: none;
    background-color: #FFF;
    border: 1px solid #ABABAB;
}

在左边部分有：

<div draggable="false" style="position: absolute; left: 0px; top: 0px; width: 486px; height: 200px; overflow: hidden; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);"></div>

我查看了模块文件，但我只看到没有上述行的JavaScript和HTML文件？

Answer 1

element.style只是告诉您样式是通过style属性或JavaScript添加到元素中的，而不是通过外部CSS文件。如果你在标记中找不到它们，你可以检查JS文件中的这些属性。

Answer 2

那是因为这些样式是内嵌。这意味着他们使用HTML标记的style属性来定义其CSS属性。 CSS不在文件或其他地方。它被定义在“应用于”元素的“内部”。

Answer 3

该特定的HTML行不需要存在于该div中存在于DOM中的任何文件中。例如，这个Javascript会像这样创建一个div：

var div = document.createElement('div');
div.setAttribute('draggable', 'false');
div.style.position = 'absolute';
div.style.overflow = 'hidden';
div.style.cssText += 'left: 0px; top: 0px; width: 486px; height: 200px; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);';
document.body.appendChild(div);

尝试在JS文件中搜索-webkit-user-select。该样式属性很少使用，它可以帮助您找到Javascript代码的相关部分。

Answer 4

我遇到了类似的问题，结果发现AdBlocker（浏览器插件）正在插入内嵌样式来隐藏我认为是广告的网站上的图片。尝试禁用部分或全部浏览器插件，看看它们是否干扰了网页的呈现方式。

Answer 5

这可能不是您正在寻找的，但是如果您点击检查器右上角的小“+”图标，它会让您将样式添加到已附加到元素的css类中。当您这样做时，您将能够单击显示在已定义样式右侧的检查器样式表链接。我认为最接近你可以定义某种包含所有自定义样式的临时样式表。

这就是我为快速测试所做的事情。在html中设置一些类，然后在检查器侧面板中添加更多自定义样式 - 因为它易于编辑和/或选择颜色。然后打开检查器样式表，并在完成后将它们全部复制。

当它说element.style时如何找到代码的来源？

5 个答案: