在Web開發中，我們經常需要對網頁的樣式進行調整。但是，在不同的瀏覽器下，同一個網頁的樣式可能會出現差異。為了解決這個問題，我們可以使用監控網頁css變化的方法。

使用JavaScript實現網頁css的監控，可以分為兩個步驟：

1. 獲取DOM元素及其樣式信息
2. 監聽DOM元素樣式的變化

第一步是通過JavaScript獲取到網頁上需要監控的DOM元素及其樣式信息。我們可以使用以下三種方式中的一種：

// 通過id獲取DOM元素
var element = document.getElementById("element-id");
// 通過class獲取DOM元素
var elements = document.getElementsByClassName("element-class");
// 通過選擇器獲取DOM元素
var element = document.querySelector("selector");

在獲取DOM元素后，接下來就是要獲取它的樣式信息。我們可以使用以下代碼：

var styles = window.getComputedStyle(element);
// 獲取元素的寬度
var width = styles.getPropertyValue("width");
// 獲取元素的高度
var height = styles.getPropertyValue("height");
// 獲取元素的背景顏色
var backgroundColor = styles.getPropertyValue("background-color");

在獲取到DOM元素及其樣式信息后，我們需要對它進行事件監聽，以便在其樣式發生變化時能夠及時得到通知。以下是具體的代碼實現：

// 創建MutationObserver對象
var observer = new MutationObserver(function(mutations) {
// 每個mutation對象包含一個target屬性，表示發生變化的DOM元素
mutations.forEach(function(mutation) {
// 將變化的CSS屬性和值打印到控制臺
console.log(mutation.attributeName + ": " + mutation.target.style[mutation.attributeName]);
});
});
// 配置觀察選項
var config = { attributes: true };
// 監聽DOM元素變化
observer.observe(element, config);

使用以上代碼，我們就可以在控制臺中實時監測DOM元素的CSS樣式變化了。