Изменить стиль содержания innerHTML [закрыт]

3375
13 февраля 2020, 01:20
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 10 месяцев назад.

Помогите сделать padding-top текста "ТИП ДОКУМЕНТА: ПРИХОД", в коде:

<div id="changeview"><input id="inp" disabled  type="text" placeholder="0" name="input" size="46" style="text-align: right;"></div> 
<input type="button" name="vz" value="ВЗ"style="background: #434755; color: white;" onclick="document.getElementById('changeview').innerHTML='ТИП ДОКУМЕНТА: ПРИХОД' ">

кнопкой меняем значение внутри блока. Пытался сделать отступ сверху через блок #changeview, но само собой что идёт отступ блока, а надо отступ текста от верхней границы

Answer 1

Текст сам по себе не может иметь padding. Это свойство для элементов.
В вашем случае грубое решение будет таким:

//addEventListener - это страшное слово значит "добавить событие" → у нас "Клик" 
//и запустить функцию при клике.  
//Когда начнете писать коды длиннее одной строки, так будет правильнее 
document.getElementById('hide').addEventListener('click',function(){ 
  document.getElementById('changeview').innerHTML = '<div style="padding-top: 25px;">ТИП ДОКУМЕНТА: ПРИХОД</div>'; 
});
/* CSS */ 
.btn {background-color: #434755; color: white;} 
#inp {font-size: 20px; text-align: right;}
<div id="changeview"> 
  <input id="inp" type="text" placeholder="0" disabled> 
</div> 
 
<button id="hide" class="btn">B3</button>

Но не ясно, для чего вам этот padding... может он там и не ннада... Потому что возможно его можно было бы заменить на innerHTML = '<br>ТИП ДОКУМЕНТА: ПРИХОД';

br - от англ. break - переносит всякое на новую строку.

А отмеченный блок *CSS... Это рубо говоря тот же style="..." только записанный в другом месте. Что позволяет визуально уменьшить размер HTML и легче смотреть код.Чтобы работало, нужно написанное поместить вверху страницы, <style> вот здесь </style>

Answer 2

При нажатии на кнопку вы меняете содержимое дива changeview, а именно удаляете input и вставляете свой текст 'ТИП ДОКУМЕНТА: ПРИХОД', в итоге у вас остается контейнер changeview, внутри которого текст, к которому нельзя обратиться, потому что у него нет ни тэгов, ничего. Остается и делать отступ через changeview.
Вы можете дополнить 'ТИП ДОКУМЕНТА: ПРИХОД' вот так: '<div class=prihod>ТИП ДОКУМЕНТА: ПРИХОД</div>' (или не "div" а "p", любой нужный тег) и в стилях прописать отступ для класса prihod. Это и будет отступ именно от текста.

Answer 3

Обернув текст блоком и присвоив ему класс возникла проблема с кавычками.

если кому нибудь пригодится решил проблему так:

<input type="button" name="vz" value="ВЗ"style="background: #434755; color: white;" onclick="removeMess(this) ">
<script>
    function removeMess(th) {
        document.getElementById('changeview').innerHTML='<div class="screentext">ТИП ДОКУМЕНТА: ПРИХОД</div>'
    }
</script>
.screentext{
    font-family: 'Press Start 2P', cursive;
    width: 415px;
    height: 65px;
    background: blue;
    font-size: 21px;
    color: white;
    padding-top: 15px;
    text-align: center;
}
READ ALSO
IIS сервер не отдаёт файл

IIS сервер не отдаёт файл

На IIS Express все работает отличноПереношу на сервер - при попытке скачать файл пишет "Не удалось скачать"

3511
Как создать файл в директории

Как создать файл в директории

Я в программе узнаю директорию в какой расположен исполняемый файл программы, как создать в ней текстовый файл?

3421
Сохранение и загрузка массива Дат

Сохранение и загрузка массива Дат

Как правильно осуществлять сохранение и загрузку массива дат DateTime? Сейчас я осуществляю сохранение массива вот такПравильно ли я делаю...

3721