Иногда необходимо динамически изменить содержание или оформление элементов документа в HTML. Если это нужно сделать динамически и без перезагрузки страницы, то без JavaScript тут не обойтись.
Один из способов получить HTML элемент из JS это присвоить ему id и обращаться по этому id:
HTML:
JavaScript
И переменная div_example будет содержать ссылку на HTML элемент.
Теперь можно изменять оформление и содержание div-блока в JS :
Таким образом измениться фон блока div на красный, ширина станет равна 300px, а высота 200px. Текст изменён на "Динамический текст" с помощью атрибута innerHTML.
Спасибо за внимание.
1 2 3 | <div id="example-div"> Текст</div> |
1 | var div_example = document.getElementById("example-div"); |
1 2 3 4 5 | var div_example = document.getElementById("example-div");div_example.style.baсkground = "#f00";div_example.style.width = "300px";div_example.style.height = "200px";div_example.innerHTML = "Динамический текст"; |