Css是用來實現網頁布局和美化的重要工具，如果你想要讓網頁元素有更加生動的效果，例如在鼠標經過時改變元素顏色等，那么你需要獲取元素距離。CSS中，你可以通過動態獲得距離來實現這一效果。

動態獲得元素距離的方法非常簡單，你只需要在CSS中使用偽類選擇器來實現。例如，在以下代碼示例中，你可以看到一個帶有:hover偽類選擇器的button元素。當鼠標懸停在該按鈕上時，CSS將為其添加一個新的字體顏色。

button:hover {
color: red;
}

但是，如果你想要改變元素的其他屬性，例如位置或大小，則需要使用一些額外的代碼。

為了獲得元素的距離屬性，你需要使用JavaScript。以下代碼將在頁面加載時調用一個函數，該函數將獲取元素的left和top位置，然后在鼠標懸停在它上面時改變元素的字體顏色。

function getPosition(element) {
var left = element.offsetLeft;
var top = element.offsetTop;
return { left: left, top: top };
}
var button = document.getElementById('my-button');
var position = getPosition(button);
button.addEventListener('mouseover', function() {
button.style.color = 'red';
});

在這個例子中，我們首先定義了一個名為getPosition的函數來獲取元素的left和top位置。然后，我們使用JavaScript獲取button元素，并調用getPosition函數來獲得它的位置。最后，我們給button元素添加一個mouseover事件監聽器，當鼠標懸停在它上面時，我們將改變它的字體顏色。

總的來說，使用CSS和JavaScript來動態獲得距離屬性是一項非常有用的技能。通過使用這些工具，你可以為你的網站添加各種不同的生動效果和動態特性。