custom.js: 6 Uncaught TypeError: Невозможно прочитать свойство 'width' of null

, когда я пытаюсь переместить изображение в центр, когда браузер может показать ошибку, не может прочитать значение ширины свойства null. Я пытаюсь разделить ширину экрана на 2, я не могу объяснить, почему эта ошибка отображается. custom.js: 6 Uncaught TypeError: Невозможно прочитать свойство 'width' of null

var mobile = document.getElementById("mobile"); 
var monitor = document.getElementById("monitor"); 
var tab = document.getElementById("tab"); 
var header = document.getElementById("header"); 
var position = (screen.width - monitor.width)/2; 
monitor.style.left = position+"px;"; 
function initScroll(){ 
    if(window.pageYOffset >500){ 
    mobile.style.left = "300px"; 
    tab.style.right = "250px"; 
    header.style.height = "60px"; 
    header.style.fontSize = "25px"; 
    }else{ 
    header.style.height = "60px"; 
    header.style.fontSize = "25px"; 
    mobile.style.left = "0px"; 
    tab.style.right = "0px"; 
    } 
} 
window.addEventListener("scroll",initScroll);

*{padding: 0;margin: 0;font-family:arial;} 
#header{height:100px;background-color: #354458;font-size: 40px;color:#fff; text-align:center;line-height:2.5; 
position:fixed; width:100%;z-index:20; 
    -moz-transition: 2s height, 2s font-size; 
    -o-transition: 2s height, 2s font-size; 
    -webkit-transition: 2s height, 2s font-size; 
    transition: 2s height, 2s font-size; 
} 
#banner{background: #3a9ad9;height:400px;position:fixed;width:100%; 
top:100px;font-size:50px; text-align: center; color 
    :#fff;z-index:10; 
} 
#banner > * { 
    margin-top:30px; 
} 
#content{ 
    top:500px; 
    position:relative; 
    height:1000px; 
    padding-top:200px; 
    background-color: #fff; 
    z-index:15; 
} 
#mobile{ 
    position: absolute; 
    left: 0; 
    z-index: 15; 
    top: 470px; 
    -moz-transition: 2s left; 
    -o-transition: 2s left; 
    -webkit-transition: 2s left; 
    transition: 2s left; 
} 
#monitar{position: relative;} 
#tab{ 
    position: absolute; 
    right: 0; 
    z-index: 15; 
    top: 385px; 
    -moz-transition: 2s right; 
    -o-transition: 2s right; 
    -webkit-transition: 2s right; 
    transition: 2s right; 

}

<html> 
<head> 
    <title>Java script Scroller</title> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" type="text/css" href="./css/style.css"/> 
    <script src="./js/custom.js"></script> 
</head> 
<body> 
     <div id="wrapper"> 
       <div id="header">Header</div> 
       <div id="banner"> 
        <h1>My Animation</h1> 
        <h2>First collapsable header</h2> 
        <h3>Apurva Kinkar</h3> 
       </div> 
       <div id="content"> 
        <img id="mobile" src="./img/1.jpg" /> 
        <img id="monitar" src="./img/2.png" /> 
        <img id="tab" src="./img/3.jpg" /> 
       </div> 
     </div> 
</body> 
</html>

источник

2016-10-03 Apurva Kinkar

Ваш img-id называется «monitar». Там может быть опечатка –

Я меняю это, но его показывая ту же ошибку –

У вас есть ошибка опечатка с <img> декларации, он должен быть monitor не monitar

<img id="monitar" src="./img/2.png" />

Изменить это как,

<img id="monitor" src="./img/2.png" />

Надеюсь, это поможет!

источник

2016-10-03 06:26:02

Во-первых, ваш идентификатор изображения ошибочно записан.

Изменить это: -

<img id="monitar" src="./img/2.png" />

<img id="monitor" src="./img/2.png" />

После изменения этого, вы все равно получите ту же ошибку. Это связано с тем, что, когда ваш js-код запускается, элемент img по-прежнему не добавляется в DOM. Для этого сделайте код javascript запущенным в функции document.ready (когда img с id "monitor" присутствует в DOM).

Вот working example, который использует функцию document.ready() jQuery.

Вы также можете использовать this example, если вы не хотите использовать jQuery.

источник

2016-10-03 06:42:00

Thanx but i can not understan why use The (function() {} –

В основном это эквивалентно 'window.onload'. Вы можете получить более подробную информацию об этом в [ ссылка] (http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the) –

@ApurvaKinkar Я отредактировал свой ответ на чтобы вы лучше поняли. Посмотрите :) –

custom.js: 6 Uncaught TypeError: Невозможно прочитать свойство 'width' of null

ответ

Смежные вопросы