How can I get element by ClassName with starts with a certain string?

Question

I need to get element by ClassName which starts with:

width-48 height-48 profile_view_img

The full tag:

<div class="width-48 height-48 profile_view_img_9131256"></div>

The numbers of this class always changes.

This is what I have tried so far:

var x = window.document.querySelectorAll("*[class^=\"width-48 height-48 profile_view_img\"]")[0]

And did this not work? What did you get? Can we see your HTML also? — Scimonster, Jul 12 '16 at 09:11
Do you want to select one element that starts with all three classes? — Jacques Marais, Jul 12 '16 at 09:14
Please visit this for JQuery way: http://stackoverflow.com/a/2178504/3080799 — gox9, Jul 12 '16 at 09:28
@Jacques Marais it returns [object HTMLSpanElement] - but how can it return exactly the class name? — Andrew, Jul 12 '16 at 09:29

score 5 · Accepted Answer · answered Jul 12 '16 at 09:34

5

Try the following:

var x = window.document.querySelectorAll("*[class^=\"width-48 height-48 profile_view_img\"]")[0]
var className = x.className;

answered Jul 12 '16 at 09:34

Jacques Marais

thepio · Answer 2 · 2016-07-12T09:19:47.480

1

You could either use the querySelector like this:

var element = document.querySelector(".width-48.height-48.profile_view_img");

Or just use getELementsWithClass which accepts spaces like this:

var elements = document.getElementsByClassName("width-48 height-48 profile_view_img");

edited Jul 12 '16 at 09:19

answered Jul 12 '16 at 09:17

thepio

2

The OP meant the classes should start with those strings, not be those strings. – Jacques Marais Jul 12 '16 at 09:18

Rounin · Answer 3 · 2016-07-12T09:20:28.117

0

You're almost there.

Try:

var x = document.querySelectorAll('.width-48.height-48.profile_view_img')[0];

This reads as:

Let Variable X be the first element in the document which contains the classes .width-48 AND .height-48 AND .profile_view_img.

edited Jul 12 '16 at 09:20

answered Jul 12 '16 at 09:17

Rounin

2

The OP meant the classes should start with those strings, not be those strings. – Jacques Marais Jul 12 '16 at 09:18
What happens if it doesn't find any such elements? – Dropout Jul 12 '16 at 09:18
You're quite right, @JacquesMarais - I missed that. – Rounin Jul 12 '16 at 09:19

score -1 · Answer 4 · answered Jul 12 '16 at 09:25

-1

For the first element that has classes with names starting with

width-48 and height-48 and profile_view_img

you can try with:

var x = window.document.querySelectorAll("*[class^='width-48'] *[class^='height-48'] *[class^='profile_view_img']")[0]

answered Jul 12 '16 at 09:25

José M. Carnero

4 Answers4