我正在尝试创建一个交互式网页,其中包含与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停止工作。谁能解释为什么请帮助我解决问题?谢谢!
答案 0 :(得分:1)
element.style
仅返回内联样式。因此,没有内联top
,它是一个空字符串,
如果您想要所有应用的样式,请使用getComputedStyle:window.getComputedStyle(element).top
。