JavaScript仅在某些CSS规则内联时才有效

Question

I am trying to make an interactive web page with the css part and javascript separated from the html document. 我正在尝试制作一个具有css部分和javascript与html文档分开的交互式网页。

sandbox.html (part of it): sandbox.html （部分）：

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

sandbox.css (part of it): 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 (part of it): 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";
    }
}

somehow if I remove the inline style "top:-90px" from the list element (since the style is already in the *.css anyway), the javascript stops working. 以某种方式，如果我从列表元素中删除了内联样式“ top：-90px”（因为该样式已经在* .css中），则javascript将停止工作。 Can anyone explain why please and help me solve the problem? 谁能解释为什么请帮我解决问题？ Thank you! 谢谢！

Answer 1

element.style only returns inline styles. element.style仅返回内联样式。 Hence, without an inline top , it is an empty string, 因此，如果没有内联top ，则它是一个空字符串，

If you want all applied styles, use getComputedStyle : window.getComputedStyle(element).top . 如果想要所有应用的样式，请使用getComputedStyle ： window.getComputedStyle(element).top .top 。

JavaScript仅在某些CSS规则内联时才有效

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-06 06:47:12

JavaScript仅在某些CSS规则内联时才有效

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-06 06:47:12

解决方案1
1 已采纳 2014-04-06 06:47:12