JS - Невозможно прочитать свойство 'setAttribute' of null

Я довольно новичок в javascript и хочу закодировать заголовок html-сайта. JS: когда ширина окна меньше 1215px -> левая часть имеет ширину 100%; правая часть заголовка до 0JS - Невозможно прочитать свойство 'setAttribute' of null

Я всегда получаю сообщение «Не могу прочитать свойство» setAttribute «null» Ошибка!

Пожалуйста, помогите! Код:

if (window.innerWidth < 1215) { 
 
    document.getElementById("#headerLeft").setAttribute("style", "width:100%"); 
 
    document.getElementById("#headerRight").setAttribute("style", "width:0%"); 
 
} else { 
 
    document.getElementById("#headerLeft").setAttribute("style", "width:50%"); 
 
    document.getElementById("#headerRight").setAttribute("style", "width:50%"); 
 
}

body { 
 
    margin:0; 
 
} 
 

 
header{ 
 
    height:100px; 
 
    width:100%; 
 
} 
 

 
#headerLeft { 
 
    background-color:#FF7043; 
 
    height:100px; 
 
    float:left; 
 
} 
 

 
#headerRight { 
 
    background-color:#FFFFFF; 
 
    height:100px; 
 
    float:right; 
 
} 
 

 
.headerTitle { 
 
    font-family:'Roboto', sans-serif; 
 
    margin:15px; 
 
    font-size:70px; 
 
} 
 

 
#headerRight .headerTitle { 
 
    text-align:left; 
 
    color:#FF7043; 
 
    font-weight:300; 
 
} 
 

 
#headerLeft .headerTitle { 
 
    text-align:center; 
 
    color:#FFFFFF; 
 
    font-weight:900; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>example</title> 
 
    
 
    <!-- css --> 
 
    <link type="text/css" rel="stylesheet" href="style.css"> 
 
    
 
    <!-- fonts --> 
 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,100,300' rel='stylesheet' type='text/css'> 
 
    
 
    <!-- javascripts --> 
 
    <script language="javascript" type="text/javascript" src="script.js"></script> 
 
    
 
</head> 
 
<body> 
 
    <header> 
 
     <div id="headerLeft"> 
 
      <p class="headerTitle">example</p> 
 
     </div> 
 
     
 
     <div id="headerRight"> 
 
      <p class="headerTitle">example</p> 
 
     </div> 
 
    </header> 
 
    
 
    <nav> 
 
    </nav> 
 
    
 
    <main> 
 
    </main> 
 
    
 
    <footer> 
 
    </footer> 
 
</body> 
 
</html>

источник

2016-01-15 Nikolaus Dräger

Не ответ на ваш вопрос, но вы можете захотеть взглянуть на [вопросы СМИ] (https://developer.mozilla.org/en- US/docs/Web/CSS/Media_Queries/Using_media_queries) –

Это происходит потому, что все ваши звонки на document.getElementById не в состоянии найти что-нибудь, так как нет никаких элементов с этими идентификаторами. Похож на привычки jQuery в игре, удалите # со своих идентификаторов.

источник

2016-01-15 19:58:37 mynameiscoffey

Похоже, он тоже работает слишком быстро ... –

Да, сценарий должен быть включен в объявление _bottom_ страницы, а не в голове. Или он должен быть завернут в eventListener для события 'window.load'. – juandemarco

Сначала сделайте выбор по Id без '#'. Во-вторых, установить стиль таким образом:

document.getElementById('').style.width = "20%";

источник

2016-01-15 20:05:50 Dmitry

JS - Невозможно прочитать свойство 'setAttribute' of null

ответ

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