如何判斷頁面作者是否手動設置了CSS屬性？

Question

我希望能夠判斷頁面作者是否為DOM元素設置了特定的CSS屬性(width, height, margin, padding, font-size, …) 。 我的目標是不更改已明確設置其維度的元素，而是更改那些沒有明確設置維度的元素。

如果頁面作者將寬度CSS屬性設置為內聯(style="width: 100px;") ，或者通過樣式表，則function isPropertySet(elem, "width")應返回true 。

這不是直截了當的，因為布局引擎推斷出這些值，但似乎我嘗試訪問它們，瀏覽器提供了值。

例如，我嘗試過getComputedStyle(elem).getPropertyValue("width") ，但這會返回計算出的寬度（給定名稱並不奇怪）。

樣式屬性（例如elem.style.width ）是不夠的，因為它不包括樣式表中設置的屬性。

在我去尋找樣式表的巨大痛苦之前，有沒有人有更好的方法？

謝謝！

Answer 1

如果要為未自定義的元素提供默認樣式集，則最簡單的方法是創建自己的樣式表並將其放在頂部，而不是任何其他CSS文件 。 這樣，在其他地方定制的每個元素都將覆蓋您的默認樣式。 注意級聯順序 ：不僅你的樣式應該先於其他樣式，而且選擇器也應該足夠通用。

另一方面，如果出於某種原因，你想通過JavaScript知道元素是否是自定義的，那么除非你想要將特定樣式與默認樣式進行比較，否則它是不可能的，因為默認樣式可能因瀏覽器而異。 例如，在Firefox中， <h1/>的默認樣式是：

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

而Chrome的風格略有不同：

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

這會產生一個有問題的邊緣情況。 想象一下，我希望所有<h1/>都是font-weight:normal; font-size: 200%; font-weight:normal; font-size: 200%; ，但在一個特定的頁面上有一個特定的標題，我希望它是2em並以粗體顯示。 你會認為標題不是自定義的，並且覆蓋它的風格，而事實上，它是自定義的，大小和重量是故意設置的。

Answer 2

如果您不擔心繼承的樣式而只關注特定的DOM元素，那么您可以動態創建特定的元素和類名（因此它只有CSS樣式），然后使用上述方法檢查它的寬度並進行比較？

Answer 3

我發現從JavaScript回答這個問題的最好方法是創建一個臨時元素，它不附加到dom，並從中讀取我的默認值。 然后我根據從我正在測試的元素（使用jQuery或getComputedStyle）讀取的值測試默認值 - 如果他們比較那么它是最好的猜測他們還沒有設置。 顯然，這有一個缺點，即如果元素的屬性設置為與默認值完全相同的值，則無法區分。

像這樣的東西

function hasDefaultStyle(elm, prop) {
  var def = $('<'+$(elm).attr('tagName')+' />').css(prop);
  return $(elm).css('prop') == def;
}

在處理不同的維度指標時，例如百分比，厘米，em等等 - 由於您提到的計算問題，這些必須以不同的方式處理 - 至少在FireFox之外的瀏覽器上。

FireFox在我看來是正確的，當你從一個沒有放在dom中的元素請求樣式時，它返回原始值，即50％。

有關如何解決至少百分比問題的更多信息，請在此處查看我的答案：

使用JavaScript確定元素是否具有固定寬度或百分比寬度

然而，這些方法是必要的，這是相當荒謬的：/