Skip to main content
hans-g.
hans-g.
Legend
January 24, 2018
Answered

javascript font size output

  • January 24, 2018
  • 1 reply
  • 773 views

Hello, hope I'm in the right forum!

Here an example about my difficulties to find font size output:

source: Tryit Editor v3.5 ​

<!DOCTYPE html>

<html>

<body>

<p>Creating a JavaScript Object.</p>

<p id="demo"></p>

<script>

var car = {type:"Fiat", model:"500", color:"white"};

document.getElementById("demo").innerHTML = car.type;

</script>

</body>

</html>

>>> result:

Creating a JavaScript Object.

Fiat

How can I influence the font sizes individually for every result like these

Creating a JavaScript Object. >>> 18 pt

Fiat >>> 24 pt Bold Italian

Thanks in advance

Hans-Günter

    This topic has been closed for replies.
    Correct answer osgood_

    Hi Hans, try the below:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Date/Year/Month</title>

    <style>

    .heading {

    font-family: helvetica, verdana, sans-serif;

    font-size: 18px;

    margin 0;

    padding: 0;

    }

    #test p {

    font-family: helvetica, verdana, sans-serif;

    font-size: 24px;

    }

    </style>

    </head>

    <body>

    <h1 class="heading">Letzte Aktualisierung<h1>

    <div id="test">Hello</div>

    <script>

    var d = new Date();

    document.getElementById("test").innerHTML =

    "<p> Date: " + d.getDate() + "</p>" +

    "<p> Year: " + d.getFullYear()  + "</p>" +

    "<p> Month: " + d.getMonth() + 1 + "</p>";

    </script>

    </body>

    </html>

    1 reply

    O
    osgood_
    Legend
    January 24, 2018

    Hans you would just include the css in a linked stylesheet or embedded in the a page as below: Change font-family and font size/style to suit.

    <!DOCTYPE html>

    <html>

    <style>

    p {

    font-family: helvetica, verdana, sans-serif;

    font-size: 18px;

    }

    #demo {

    font-family: helvetica, verdana, sans-serif;

    font-size: 24px;

    }

    </style>

    <body>

    <p>Creating a JavaScript Object.</p>

    <p id="demo"></p>

    <script>

    var car = {type:"Fiat", model:"500", color:"white"};

    document.getElementById("demo").innerHTML = car.type;

    </script>

    </body>

    </html>

    IF you want to extract ALL the info in the array:

    <script>

    var car = {type:"Fiat", model:"500", color:"white"};

    document.getElementById("demo").innerHTML =

    "<p>Type: " + car.type + "</p>" +

    "<p>Model: " + car.model + "</p>" +

    "<p>Color: " + car.color + "</p>"

    ;

    </script>

    hans-g.
    hans-g.Author
    Legend
    January 24, 2018

    Many thanks osgood_,

    I'm very unsure by this issue. Would you please create another - for my better understanding - by using this script:

    <script type="text/javascript">

    document.write(new Date().getDate()+"."+(new Date().getMonth()+1)+"."+new Date().getFullYear().document.getelementbyid('test').style.fontSize='20')

      </script>

    where I want to show the heading (= "Letzte Aktualisierung") in 18 pt and the result in 24 pt Bold Italian.

    Thank you in advance.

    Hans-Günter

    O
    osgood_Correct answer
    Legend
    January 24, 2018

    Hi Hans, try the below:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Date/Year/Month</title>

    <style>

    .heading {

    font-family: helvetica, verdana, sans-serif;

    font-size: 18px;

    margin 0;

    padding: 0;

    }

    #test p {

    font-family: helvetica, verdana, sans-serif;

    font-size: 24px;

    }

    </style>

    </head>

    <body>

    <h1 class="heading">Letzte Aktualisierung<h1>

    <div id="test">Hello</div>

    <script>

    var d = new Date();

    document.getElementById("test").innerHTML =

    "<p> Date: " + d.getDate() + "</p>" +

    "<p> Year: " + d.getFullYear()  + "</p>" +

    "<p> Month: " + d.getMonth() + 1 + "</p>";

    </script>

    </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices