How to add inline style with javascript

Question

I have this structure:

<div class="something1">
<div class="something2">
<div class="something3">
<div class="something4">
<div class="something5">
<div class="something6">
<div class="something7">
<div class="something8">
<div class="something9">
<article id="some-dynamical-id" class="something10">
<div class="something11">
<h2 class="something12">
<p class="post-meta"> ....

Now what i need is add inline style to this last element

I tried this:

<script>
document.getElementByClassName("post-meta").style.position = "absolute";
</script>

I suspect there's an error in your console, because `getElementByClassName()` is invalid, but `getElementsByClassName()` **is** valid, and the "s" should indicate that it's not a single value, but a collection of sorts that must be iterated over. — mykaf, Sep 27 '22 at 13:38
`...it doesn't work`. How do you know? How did you attempted to implement this? Did you iterate over it as I suggested? — mykaf, Sep 27 '22 at 13:52
document.getElementsByClassName("post-meta").style.position = "absolute"; dont add inline style to classes — koupmi, Sep 27 '22 at 13:55
Again `getElementsByClassName()` is not a single value because you are getting element**s**. You'll need to iterate over each item in the collection. — mykaf, Sep 27 '22 at 14:01

Cédric · Accepted Answer · 2022-09-27T13:44:55.617

2

getElementByClassName is supposed to be getElementsByClassName and it returns an array so you can't apply style directly to it, you have to select the first or make a loop.

If you only have one element with this class, I suggest you to turn it into an id and use getElementById. Else, if it's the first element with this class, you can use querySelector(".post-meta") (or getElementsByClassName("post-meta")[0])

edited Sep 27 '22 at 13:44

answered Sep 27 '22 at 13:42

Cédric

2,239
3
10
28

I can't edit html and add ID. getElementsByClassName also doesnt work. There are more elements. – koupmi Sep 27 '22 at 13:44
`getElementsByClassName("post-meta")[0]` works then if your `post-meta` element is the first element with that class. Since you can't edit your html – Chris G Sep 27 '22 at 13:46
This effectively repeats what already has been mentioned in [this post](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) and [in many many other posts](https://stackoverflow.com/questions/linked/10693845). From [answer]: "_avoid trying to answer questions which... ...have already been asked and answered many times before._" – Ivar Sep 27 '22 at 13:48
getElementsByClassName("post-meta")[0] works for first one, but what if i need add style to all post-meta classes? – koupmi Sep 27 '22 at 13:49
2

then you can do that inside a for loop and instead of 0 you use index `getElementsByClassName("post-meta")[i]` – Chris G Sep 27 '22 at 13:50
No, sadly with [i] all elements are without inline style – koupmi Sep 27 '22 at 13:54
1

@Ivar Indeed I didn't think about it since the question can be answered fast, my bad – Cédric Sep 27 '22 at 13:55
`elements = document.getElementsByClassName("post-meta");` save that in a variable like this then iterate thru your elements var `for (let i = 0; i < elements.length; i++) { elements[i].style.position = "absolute"; }` https://jsfiddle.net/kenpy/so7afg25/15/ – Chris G Sep 27 '22 at 14:03

How to add inline style with javascript

1 Answers1