javascript - 字体大小，使用追加时div框大小不变

Question

我正在尝试制作一个全宽和高 150px 的框，但它没有以我想要的方式显示，也没有显示我设置的背景颜色。此外，我使用 jQuery 的追加函数编写的文本不会更改其字体大小。

html:

<div id = "header"></div>

样式:

#header{
    height: 150px;
    width: 110%;
    font-size: 80px;
}

js:

$(target).append(message);

目标是#header

Answer 1

您不需要将宽度设置为 110%，100% 将填满整个屏幕宽度，否则会溢出。

确保您选择了正确的目标以使用追加，并确保您已将 jQuery 包含在您的 javascript 中。

您首先没有在 css 中设置任何背景颜色，这就是为什么没有显示背景颜色的原因。

$("#header").append("Test text");

#header{
    height: 150px;
    width: 100%;
    font-size: 80px;
    border:1px solid red;
    background-color:gray;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "header"></div>