當它說element.style時如何找到代碼的來源？

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中設置一些類，然后在檢查器側面板中添加更多自定義樣式 - 因為它易於編輯和/或選擇顏色。 然后打開檢查器樣式表，並在完成后將它們全部復制。