无法读取属性样式错误

我使用nginx和chrome作为浏览器。我只是想改变div的背景颜色。而孤立的JS在小提琴中工作。但完整的标记不起作用。无法读取属性样式错误

我一直在横幅div的浏览器控制台中发现“TypeError：无法读取null属性'样式'”。

<!DOCTYPE html> 
<html> 
<head> 
<!--<meta charset="utf-8"> --> 
<title>ZZZ lin!</title> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 
<!-- <link rel="stylesheet" href="/static/global.css" type="text/css"> --> 
<style type="text/css"> 
#banner { 
     display:inline; 
     position:absolute; 
     top:0px; 
     left:0px; 
     height:40px; 
     width:100%; 
     background-color:green; 
} 
</style> 
<script type="text/javascript"> 
var banner_colors = ['#d99b00', '#7f5b00', '#332d0d', '#fffb00', '#888c69', '#9bbf30', '#dbf2b6', '#1f5900', '#59b376', '#00e667', '#004d2d', '#80ffec', '#739993', '#00cbe6', '#263233', '#0095f2', '#1d5273', '#b6dbf2', '#3354cc', '#162559', '#8f93bf', '#2a00e6', '#474359', '#390080', '#5b3973', '#250033', '#b539e6', '#c499cc', '#800071', '#660031', '#d93685', '#8c4668', '#cc002c', '#d9a3ae', '#660009', '#ff808a', '#403031']; 
var i = 0, howManyTimes = banner_colors.length; 
function f() { 
    document.getElementById('banner').style.backgroundColor = banner_colors[i]; 
    i++; 
    if(i < howManyTimes){ 
     setTimeout(f, 1000); 
    } 
} 
document.onload = f(); 

</script> 
</head> 
<body> 
    <div id="banner"> 
    </div> 
    <div id="main-content"> 
     <p>Main page content goes here</p> 
     <p>Main page content goes here</p> 
     <p>Main page content goes here</p> 
     <p>Main page content goes here</p> 
     <p>Main page content goes here</p> 
    </div> 
<h1>Hello from Flask!</h1> 
</body> 
</html>

来源

2016-08-28 user193661

工作正常... https://jsfiddle.net/538otjwe/ – Rayon

因为你正在给一个函数调用，而不是你的onload事件处理函数的函数引用。使用'document.onload = f'。 –

@SpencerWieczorek停止错误，但JS也不起作用。 – user193661

使用window.addEventListener("load", f)运行一次页面加载（其中f是你<script>标签包裹在函数内部的内容）。

来源

2016-08-28 03:18:59

window.addEventListener（“load”，f）起作用。 document.onload不起作用 – user193661

无法读取属性样式错误

回答

相关问题