Highlighted

javascript font size output

Adobe Community Professional ,
Jan 24, 2018

Copy link to clipboard

Copied

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

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>

Views

374

Likes

Translate

Translate

Report

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

javascript font size output

Adobe Community Professional ,
Jan 24, 2018

Copy link to clipboard

Copied

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

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>

Views

375

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 24, 2018 1
Adobe Community Professional ,
Jan 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 24, 2018 0
LEGEND ,
Jan 24, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 24, 2018 0
hans-g. LATEST
Adobe Community Professional ,
Jan 24, 2018

Copy link to clipboard

Copied

Hi osgood_,

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

Hans-Günter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 24, 2018 0