Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

javascript font size output

LEGEND ,
Jan 24, 2018 Jan 24, 2018

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

651
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jan 24, 2018 Jan 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() 

...
Translate
LEGEND ,
Jan 24, 2018 Jan 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>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 24, 2018 Jan 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 24, 2018 Jan 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>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 24, 2018 Jan 24, 2018
LATEST

Hi osgood_,

many, many thanks, now I'll be able to variegate my "cooking". Maybe I can "pay back" otherwise.

Hans-Günter

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines