只有當一些CSS規則是內嵌的JavaScript才起作用

我正在嘗試製作一個交互式網頁，其中的CSS部分和JavaScript與HTML文檔分開。只有當一些CSS規則是內嵌的JavaScript才起作用

sandbox.html（它的一部分）：

<body> 
     <nav class="unify-bg"> 
       <ul> 
         <li><a id="ipsum" style="top:-90px">Ipsum</a></li> 
       </ul> 
     </nav> 
    </body>

sandbox.css（它的一部分）：

nav li a{ 
    float:left; 
    margin: 0 5px; 
    color: #e4b05c; 
    color: white; 
    font-weight: bold; 
    width: 120px; 
    height: 100px; 
    background-color:#e4b05c; 
    position: relative; 
    top:-90px; 
}

sandbox.js（它的一部分）：

window.onload = function() { 
    document.getElementById("ipsum").addEventListener("mouseover", function() { 
     ipsum = this; 
     var t = setInterval(function() { 
      move(ipsum, t); 
     }, 10); 
    }, false); 
} 

function move(element, interval) { 
    var pos = element.style.top.replace("px", ""); 
    if (pos > -10) clearInterval(interval); 
    else { 
     pos = parseInt(pos) + 10; 
     element.style.top = pos + "px"; 
    } 
}

不知何故，如果我從列表元素中刪除內聯樣式「top：-90px」（因爲樣式已經在* .css中），javascript停止工作。任何人都可以解釋爲什麼請幫我解決問題？謝謝！

來源

2014-04-06 Paiku Han

它「停止工作」，因爲'element.style.top'將返回一個空字符串（該元素畢竟沒有樣式集）。請參閱https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle以獲取計算出的樣式。 –

@FelixKling是的但爲什麼它會返回一個空字符串。你說window.onload只要窗口加載運行？如果這是這種情況，爲什麼它不工作，如果我把JavaScript下的導航元素？沒有window.onload（即從document.getElement開始...並且不要忘記從window.onload的匿名函數中刪除結束的大括號） –

*「但爲什麼它會返回空字符串」*因爲'element。樣式'返回元素的內聯樣式。如果你沒有設置任何內聯樣式，它只能返回一個空字符串。 *「你是說window.onload只要窗口加載就運行」*我沒有說關於'window.onload'的任何信息，但是在完全加載文檔之後，函數被調用*。 –

element.style只返回內聯樣式。因此，沒有內聯top，它是一個空字符串，

如果您想要所有應用的樣式，請使用getComputedStyle：window.getComputedStyle(element).top。

來源

2014-04-06 06:47:12 Scimonster

只有當一些CSS規則是內嵌的JavaScript才起作用

回答

相關問題