JavaScript and the Web — Layouts and Styles
By: John Au-Yeung
Tags: Programming, Technology, JavaScript, Software Development, Web Development

Photo by Guillaume Muckensturm on Unsplash

JavaScript is one of the most popular programming languages in the world. To use it effectively, we’ve to know about the basics of it.

In this article, we’ll look at how we can use JavaScript in our web apps.

We look at how to change layouts and styles of elements in JavaScript.

Layout

We can change the layout of elements dynamically with JavaScript.

An element node object has properties that we can use to change their styles.

The offsetWidth and offsetHeight properties give us the space that an element takes in pixels.

A pixel is a basic unit of measure in the browser.

clientWidth and clientHeight give us the space inside the element ignoring the border width.

getBoundingClientRect gives us the precise position of an element on the screen.

It returns the top , bottom , left , and right properties that have the number of pixels on each side relative to the top left of the screen./

If we want the positions relative to the whole document, then we add the current scroll position, which we get with the pageXOffset and pageYOffset properties.

For instance, given the following HTML:

<p>

a

</p>

<p>

b

</p>

<p>

c

</p>

we can write:

const para = document.body.getElementsByTagName("p")[0];

console.log(para.offsetWidth)

console.log(para.offsetHeight)

to get the width and height of our element.

And we can write:

console.log(para.getBoundingClientRect())

to get everything including the width and height in one function.

Styling

We can style things with the style attribute of an element.

For instance, we can write:

<p style='color: green'>

a

</p>

And we get some green text.

JavaScript can let us do the same thing dynamically.

The styles are within the style property of a DOM element node.

For example, we can write:

const para = document.getElementsByTagName("p")[0];

para.style.color = "magenta";

Then we can see that the text turned into a magenta color.

Styles that have dashes are turned into camelCase in JavaScript.

So font-family in CSS is the same as style.fontFamily in JavaScript.

Cascading Styles

The styling system for HTML is called CSS, which stands for Cascading Style Sheet.

A style sheet is a set of rules on how to style elements in a document.

We can put them in an inline style tag.

Or we can put them in a separate file.

For instance, we can write:

p {

color: 'magenta';

}

Then we specify that all p elements have the content color set to magenta.

We can also select items with specific IDs or classes by writing:

#foo {

color: 'magenta';

} .bar {

color: 'green';

}

#foo means we select an element with ID foo . # means ID.

Also, we select the elements with the class bar with a .

> indicates that we select the direct children elements of a given element.

For instance, we can write p > a to select all the a elements that are direct descendants of p .

Query Selectors

The selector syntax can be used with the querySelector or querySelectorAll methods to select elements in more flexible ways.

For instance, if we have the following HTML:

<p>

a

<span>foo</span>

<span>bar</span>

</p>

We can write:

const span = document.querySelector('p > span');

to select the first span element in the p element.

To select all of them and return them in a NodeList, we can write:

const spans = document.querySelectorAll('p > span');

The objects returned by querySelectorAll isn’t live, so they won’t change when we change the document.

Since it’s a NodeList, we can use the spread operator or Array.from to convert it to an array.

Positioning and Animating

The position style property lets us change the position of an element.

By default, it’s set to 'static' which means that it sits in a normal place in the document.

However, we can set it to relative or absolute , then we can change the element’s position via the top and left properties.

For instance, we can write:

let p = document.querySelector("p");

let pos = 0; const animate = (time, lastTime) => {

if (lastTime !== null) {

pos = time;

}

p.style.top = `${pos}px`

p.style.left = `${pos}px`

requestAnimationFrame(newTime => animate(newTime, time));

}

requestAnimationFrame(animate);

to animate:

<p style='position: fixed;'>foo</p>

We change the position of the p element with the animate function, which takes the time and lastTime parameter with the time of the parameter.

Then we set the pos variable.

Then we set the top and left properties of style to move the p element.

We call requestAnimationFrame to get the next frame.

Photo by Charlota Blunarova on Unsplash

Conclusion

We can set the position of elements to animate them.

Also, we can style them with the style property.

We can also get the dimensions of an element with various properties.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!