4

我不知道如何找到这个元素样式代码的来源。例如在 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 文件？

4

5 回答 5

2

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

于 2013-07-26T22:08:00.947 回答
0

该特定的 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 代码的相关部分。

于 2013-07-26T22:10:13.637 回答
0

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

于 2014-11-04T19:29:12.940 回答
0

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

于 2013-07-26T22:05:27.700 回答
-1

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

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

于 2013-07-26T22:25:38.130 回答