Get all elements from class with specific css style

Question

I want to get the first element that has style.fontWeight = 'bold';

Heres what i tried

function navigate(input) {
  var array = document.querySelectorAll('.menuulli').style.fontWeight == 'bold';
  console.log(array)
}

Do you mean that element has an inline style (i.e. <div style="font-weight: bold">) ? — Konrud
– Konrud, Commented Nov 18, 2019 at 12:47
Yes. So that Javascript looks for all elements in a class that have that style — Daniel Jenßen
– Daniel Jenßen, Commented Nov 18, 2019 at 12:53
Then try this document.querySelectorAll('.menuulli[style="font-weight: bold;"]') — Konrud
– Konrud, Commented Nov 18, 2019 at 12:59
Now when i have this: var array = document.querySelectorAll('.menuulli[style="font-weight: bold;"]'); console.log(array) It just gives me "NodeList []" in the console. And there is an element that has this css property. — Daniel Jenßen
– Daniel Jenßen, Commented Nov 18, 2019 at 13:05
Look at this example: jsfiddle.net/Konrud/g7vzc9s5 Works perfect for me. — Konrud
– Konrud, Commented Nov 18, 2019 at 13:13

Mamun · Accepted Answer · 2019-11-18 13:17:24Z

2

Since bolder, bold, normal all maps to their corresponding numerical values for the weight of the fonts you can try the following way:

function navigate(){
  var els = document.querySelectorAll('.menuulli');
  els = [...els].filter(el => {
    return getComputedStyle(el).fontWeight == "700"
  })[0];
  return els;
}
console.log(navigate());

.menuulli{
  font-weight: bold;
}

<ul>
  <li class="menuulli first">1</li>
  <li class="menuulli">2</li>
</ul>

edited Nov 18, 2019 at 13:17

answered Nov 18, 2019 at 13:10

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

apieceofbart Over a year ago

You are the only one realizing that bold can actually be internally converted to number, kudos!

Konrud · Accepted Answer · 2019-11-18 13:29:05Z

1

Use querySelectorAll with the attribute selector:

const array = document.querySelectorAll('.menuulli[style="font-weight: bold;"]'); 

console.log(array);

If you have a more than one style declaration on your HTML tag. For example: <div class"menuulli" style="color: red; font-weight: bold;">

Then use this selector:

/// note the asterisk
const arr = document.querySelectorAll('.menuulli[style*="font-weight: bold;"]');

Here is a JSFiddle example: jsfiddle.net/Konrud/g7vzc9s5

edited Nov 18, 2019 at 13:29

answered Nov 18, 2019 at 13:20

Konrud

1,1249 silver badges19 bronze badges

Comments

deepak thomas · Accepted Answer · 2019-11-18 12:55:36Z

0

You can find the first element by

function navigate(input) {
  var list=[];	
  var array = document.querySelectorAll('a.js-gps-track');
  array = array.forEach(function(ele){if(ele.style.fontWeight === "bold"){list.push(ele);}});
  console.log(list[0]);
}

answered Nov 18, 2019 at 12:55

deepak thomas

1,1909 silver badges25 bronze badges

Comments

Amit · Accepted Answer · 2019-11-18 12:59:40Z

0

querySelectorAll returns a NodeList so you cant check for styles on that but you have to check on items.

function navigate(input) {

const elems = document.querySelectorAll('.menuulli');
const elemsArray = Array.from(elems);
array = elemsArray.map((ele)=>
ele.style.fontWeight === "bold");
}

answered Nov 18, 2019 at 12:59

Amit

4,5582 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

Get all elements from class with specific css style

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related