当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to change width and height of <h1> text dynamically?

问题描述:

I am trying to change <h1> and <p> text's width and height dynamically. I want to get parents height and width, then use percentage for changing child's. But all my attempts are failed.

Here is my css example code:

#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;

}

in html I am using like this:

 <div id="category1">

<h1><a href="category1.html">MOVIES</a></h1>

<p>FOR ALL AGES</p>

</div>

I added width and height like below, but it didn't help:

#main-holder #category1 h1 {

height: 50%;

width: 50%;

}

网友答案:

In your code, you dont have #mainholder, but used all the css with that.so none of the styles applied. So I removed that from css and used line-height as 100% along with height. As the parent div have height as 80px, hope this is working fine and this is what you expected.

Updated Demo

Added font-size:2.9vw; for 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;
}

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

Update: Demo

For <p> Height alignment problem, Use background and border for <h1> along with height and line-height like this:

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;
}
网友答案:

Why dont you use vw for font-size ?

font-size: 5vw;

Documentation

网友答案:

To change the text size you should use font-size:72px; or font-size:3em;.

网友答案:

One of the options it to use CSSStyleSheet JS object.

Check this tutorial: http://davidwalsh.name/add-rules-stylesheets

This answer provides another approach: modify a css rule object with javascript

You can get stylesheet object and manually modify properties:

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

rules[0].style.height = '80px';
分享给朋友:
您可能感兴趣的文章:
随机阅读: