Question

我正在尝试动态更改<h1>和<p>文本的宽度和高度。我想让父母的身高和宽度，然后使用百分比来改变孩子的身高。但我所有的尝试都失败了。

这是我的css示例代码：

#main-holder #category1 {
    height: 80px;
    width: 15%;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border: thin solid #999;
    margin-top: 5%;
    margin-right: 2%;
    margin-bottom: 0px;
    margin-left: 6%;
    text-align: center;
    vertical-align: top;
}
#main-holder #category1 h1 {
    font-weight: bold;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    line-height: 20%;
    text-decoration: none;

}
#main-holder #category1 h1 a {
    color: #FFF;
    text-decoration: none;
}
#main-holder #category1 h1 a:hover {
    color: #999;
    text-decoration: none;
}
#main-holder #category1 p {
    color: #CCC;
}

在我正在使用这样的：

 <div id="category1">
        <h1><a href="category1.html">MOVIES</a></h1>
        <p>FOR ALL AGES</p>
      </div>

我在下面添加了宽度和高度，但没有帮助：

#main-holder #category1 h1 {
        height: 50%;
        width: 50%;    
    }

Answer 1

在您的代码中，您没有#mainholder，但是使用了所有css，因此没有应用任何样式。所以我从css中删除了它，并使用line-height as 100%和高度。由于parent div有height as 80px，希望这项工作正常，这正是您所期望的。

<强> Updated Demo

为font-size:2.9vw;

添加了h1

#category1 {
    height: 80px;
    width: 15%;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border: thin solid #999;
    margin-top: 5%;
    margin-right: 2%;
    margin-bottom: 0px;
    margin-left: 6%;
    text-align: center;
    vertical-align: top;
    background-color:#666;
}
 #category1 h1 {
    font-weight: bold;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
    height: 100%;
    text-decoration: none;
    font-size:2.9vw;

}
 #category1 h1 a {
    color: #FFF;
    text-decoration: none;
}
 #category1 h1 a:hover {
    color: #999;
    text-decoration: none;
}
 #category1 p {
    color: #CCC;
}

您可以使用视口值而不是ems，pxs或pts。

1vw =视口宽度的1％

1vh =视口高度的1％

更新： Demo

对于<p>高度对齐问题，请使用<h1>的背景和边框以及高度和线高，如下所示：

CSS：

#category1 {
    height: 80px;
    width: 15%;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;   
    margin-top: 5%;
    margin-right: 2%;
    margin-bottom: 0px;
    margin-left: 6%;
    text-align: center;
    vertical-align: top;


}
#category1 h1 {
    font-weight: bold;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    height: auto;
    text-decoration: none;
    font-size:2.9vw;
     background-color:#666;
     border: thin solid #999;
}

Answer 2

为什么不使用vw作为font-size？

font-size: 5vw;

Documentation

Answer 3

要更改文字大小，您应使用font-size:72px;或font-size:3em;。

Answer 4

使用CSSStyleSheet JS对象的其中一个选项。

查看本教程：http://davidwalsh.name/add-rules-stylesheets

这个答案提供了另一种方法：modify a css rule object with javascript

您可以获取样式表对象并手动修改属性：

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.height = '80px';

如何动态更改<h1>文本的宽度和高度？</h1>

4 个答案: