Блог

Я пытаюсь скрыть границу моего стиля div, потому что у меня есть идентификатор div, который нужно поместить в этот стиль, но граница отображается до того, как я нажму кнопку, чтобы выполнить идентификатор div с помощью кнопки.

Это для одного из моих заданий. Все работает нормально, кроме этого недостатка в дизайне, который у меня есть.

Я полный новичок, поэтому может показаться глупым вопросом.

 lt;htmlgt;  lt;headgt;  lt;titlegt;Old MacDonald Verselt;/titlegt;  lt;script type="text/javascript"gt;  function OldMacVerse(animal,sound)  {    document.getElementById('outputDiv').innerHTML=  'lt;pgt;Old Macdonald had a farm, E-I-E-I-O.lt;brgt;'    'And on that farm he had a '   animal   ', E-I-E-I-O. lt;brgt;'    'With a '   sound   '-'   sound   ' here, and a '   sound   '-'   sound    ' there, lt;brgt;'   ' here a '   sound   ', there a '   sound     ', everywhere a '   sound   '-'   sound   '.lt;brgt;'     'Old Macdonald had a farm, E-I-E-I-O.lt;/pgt;';    }  lt;/scriptgt;   lt;bodygt;   lt;div style= "border: solid; margin: auto; width:350px; text-align: center;"gt;  lt;h1gt;Old MacDonald Verselt;/h1gt;  lt;input type="button" value="Pig Verse"  onclick="OldMacVerse('pig','oink');"gt;  lt;input type="button" value="Sheep Verse"  onclick="OldMacVerse('sheep','baa');"gt;  lt;input type="button" value="Cow Verse"  onclick="OldMacVerse('cow', 'moo');"gt;  lt;/divgt;   lt;brgt;   lt;div style= "border: groove; margin: auto; width: 350px; text-align: center;"gt;  lt;/divgt;  lt;div id="outputDiv"gt;  lt;/divgt;   lt;/bodygt; lt;/headgt; lt;/htmlgt; 

Вы можете создать класс для своего выходного div:

 lt;stylegt; .myclass {  border: groove; } lt;/stylegt;  

И применяйте класс динамически в своей функции:

 function OldMacVerse(animal, sound) {  // ...  var element = document.getElementById("outputDiv");  element.classList.add("myclass");  // ... }  

И удалите стиль из внешнего div.

Полный код:

 lt;htmlgt;  lt;headgt;  lt;titlegt;Old MacDonald Verselt;/titlegt;   lt;stylegt;  .myclass {  border: groove;  }  lt;/stylegt; lt;/headgt;  lt;bodygt;  lt;div style="border: solid; margin: auto; width:350px; text-align: center;"gt;  lt;h1gt;Old MacDonald Verselt;/h1gt;  lt;input type="button" value="Pig Verse" onclick="OldMacVerse('pig','oink');"gt;  lt;input type="button" value="Sheep Verse" onclick="OldMacVerse('sheep','baa');"gt;  lt;input type="button" value="Cow Verse" onclick="OldMacVerse('cow', 'moo');"gt;  lt;/divgt;   lt;brgt;   lt;div style="margin: auto; width: 350px; text-align: center;"gt;  lt;/divgt;  lt;div id="outputDiv"gt;  lt;/divgt;   lt;script type="text/javascript"gt;  function OldMacVerse(animal, sound) {  var element = document.getElementById("outputDiv");  element.classList.add("myclass");   element.innerHTML =  'lt;pgt;Old Macdonald had a farm, E-I-E-I-O.lt;brgt;'    'And on that farm he had a '   animal   ', E-I-E-I-O. lt;brgt;'    'With a '   sound   '-'   sound   ' here, and a '   sound   '-'   sound    ' there, lt;brgt;'   ' here a '   sound   ', there a '   sound    ', everywhere a '   sound   '-'   sound   '.lt;brgt;'    'Old Macdonald had a farm, E-I-E-I-O.lt;/pgt;';   }  lt;/scriptgt;  lt;/bodygt;   lt;/htmlgt;