javascript仅在某些css规则是内联的情况下工作_Javascript_Css

javascript仅在某些css规则是内联的情况下工作

javascript css

javascript仅在某些css规则是内联的情况下工作,javascript,css,Javascript,Css,我正在尝试创建一个交互式网页，其中css部分和javascript与html文档分离 sandbox.html（它的一部分）： sandbox.js（它的一部分）：不知何故，如果我从列表元素中删除内联样式“top:-90px”（因为该样式已经存在于*.css中），javascript将停止工作。有人能解释一下为什么，帮我解决这个问题吗？谢谢大家! element.style仅返回内联样式。因此，如果没有内联top，则它是一个空字符串如果您想要所有应用的样式，请使用：window.getCom

我正在尝试创建一个交互式网页，其中css部分和javascript与html文档分离

sandbox.html（它的一部分）：

sandbox.js（它的一部分）：

不知何故，如果我从列表元素中删除内联样式“top:-90px”（因为该样式已经存在于*.css中），javascript将停止工作。有人能解释一下为什么，帮我解决这个问题吗？谢谢大家!

element.style

仅返回内联样式。因此，如果没有内联

top

，则它是一个空字符串

如果您想要所有应用的样式，请使用：

window.getComputedStyle（element）.top

它“停止工作”，因为

element.style.top

将返回一个空字符串（该元素毕竟没有设置样式）。请参阅以获取计算样式。@FelixKling是，但为什么它会返回空字符串。你是说window.onload在加载窗口时立即运行？？如果是这样的话，为什么如果我把javascript放在nav元素下，它就不能工作呢？？没有window.onload（即从document.getElement…开始，不要忘记从window.onload的匿名函数中删除右括号）“但是为什么它会返回空字符串”，因为

element.style

返回元素的内联样式。如果未设置任何内联样式，则它只能返回空字符串。“你是说window.onload会在窗口加载后立即运行”我没有说任何关于

window.onload的内容，但是该函数是在文档完全加载后调用的。
    <body>
        <nav class="unify-bg">
                <ul>
                        <li><a id="ipsum" style="top:-90px">Ipsum</a></li>
                </ul>
        </nav>
    </body>

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;
}

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";
    }
}