javascript仅在某些css规则内联时才有效

时间:2014-04-06 06:43:20

标签: javascript css

我正在尝试创建一个交互式网页,其中包含与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";
    }
}

如果我删除内联样式&#34; top:-90px&#34;从列表元素(因为风格已经在* .css中),javascript停止工作。谁能解释为什么请帮助我解决问题?谢谢!

1 个答案:

答案 0 :(得分:1)

element.style仅返回内联样式。因此,没有内联top,它是一个空字符串,

如果您想要所有应用的样式,请使用getComputedStylewindow.getComputedStyle(element).top