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

How to find the source of the code when it says element.style?

本文关键字：何找 代码 element style      更新时间：2023-09-26

我不知道如何找到这个元素样式代码的来源。比如在Chrome元素检查器工具的右侧，它显示了以下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文件，而没有上面的行？

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

这是因为这些样式是内联。这意味着它们使用HTML标记的style属性来定义其CSS属性。该CSS不在文件或其他位置。它被定义为"在"它所应用的元素中。

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。这个style属性很少被使用，它应该可以帮助您找到Javascript代码的相关部分。

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

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

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

相关文章：