созданный элемент не соответствует текущему JS-коду - PullRequest
Новая
       43

созданный элемент не соответствует текущему JS-коду

1 голос
/ 02 июля 2019

Я создал элемент в JS для отображения на веб-странице html. Я не вижу, почему стиль не работает должным образом. Может быть, кто-то будет так любезен, чтобы указать на любую ошибку, которую я мог сделать Спасибо. 

///HTML
<!DOCTYPE html>
<html>
    <head>
        <title>WEB 115 Final Project</title>
    </head>
    <body>
            <script src= "projectJS.js"></script>

    </body>


</html>
///JS
var elemH1 = document.createElement("h1");
elemH1.style.color = "red";
elemH1.style.fontFamily = "Tahoma";
elemH1.style.textAlign = "center";
document.write("<h1>Kent Butler</h1>");

var elemH2 = document.createElement("h2");
elemH2.style.fontFamily = "Garamond";
elemH2.style.color = "red";
elemH2.style.fontStyle = "italic";
elemH2.style.textAlign = "center";
document.write("<h2>WEB 115.0001</h2>");

Я ищу текст с красным шрифтом, с указанными семействами шрифтов и т. Д. Спасибо.

Ответы [ 3 ]

2 голосов
/ 02 июля 2019

вам нужно установить текст для ваших элементов и затем добавить их в document.body 

var elemH1 = document.createElement("h1");
elemH1.style.color = "red";
elemH1.style.fontFamily = "Tahoma";
elemH1.style.textAlign = "center";
elemH1.innerText = "Kent Butler";
document.body.appendChild(elemH1);
//document.write("<h1>Kent Butler</h1>");

var elemH2 = document.createElement("h2");
elemH2.style.fontFamily = "Garamond";
elemH2.style.color = "red";
elemH2.style.fontStyle = "italic";
elemH2.style.textAlign = "center";
//document.write("<h2>WEB 115.0001</h2>");
elemH2.innerText = "WEB 115.0001";
document.body.appendChild(elemH2);
1 голос
/ 02 июля 2019

Проблема в том, что вы создаете элемент и задаете его свойства, но на самом деле вы их не используете.Вместо этого вы создаете совершенно новый элемент без какого-либо стиля в document.write("<h1>Kent Butler</h1>")

0 голосов
/ 02 июля 2019

Кроме того, вам следует рассмотреть возможность помещения стиля в файл CSS вместо жесткого кодирования его с помощью JS.

...