0

我在这里测试了一段代码：http: //jsfiddle.net/PTtJx/ 简单的 CSS 动画和一些 JS 来显示屏幕大小。代码行编号。7 停止CSS动画：翻译。删除这条线，它再次工作。我没有找到任何理由。有没有人可以确认这是一个错误或错误的代码。谢谢

<script>
function resize(){
var P,H,W,f_Factor=1;
W=window.innerWidth;
H=window.innerHeight;

P=Math.floor(f_Factor*(8+W/50));

if(P<4){P=4;}document.body.style.fontSize=P+"px";
document.getElementById("dimensions").innerHTML = W + "x" + H;
}

resize();
</script>

<style>
.slide_1 {
z-index:50;
top: 0px;
left:0%;
position: absolute;
overflow: hidden;

font-size: 30px;

}

.slide_1 {
-webkit-animation: slide 3s infinite;
-webkit-animation-delay: 0s;
 -webkit-animation-fill-mode:forwards;
 -webkit-transform-origin: 0%  0%;
 }

@-webkit-keyframes slide {

    0%{-webkit-transform: translate(0%);}
    50%{-webkit-transform: translate(250%) ;text-shadow: 0 0 10px rgba(0,0,0,1);}
    100%{-webkit-transform: translate(0%);}
}

</style>
<html> 
<span  class="slide_1"  id="dimensions">ABC</span> 
</html>
4

1 回答 1

0

这是因为该属性为空。

document.body.style.fontSize=P+"px";我用 try/catch包围了，比如：

try{document.body.style.fontSize=P+"px";}catch(ex) {alert(ex.message);}

例外是“无法读取null的属性'style'。错误意味着元素不存在..

我希望它有帮助；）

于 2013-09-04T11:08:25.223 回答