JavaScript - Apply Multiple Styles to Multiple Elements

programming web dev
1

I am in the process of migrating jquery to vanilla js and I am converting this:
$("#pricing_annual, #annual_output, #monthly_output, #pricing-section-special").css(“display”,“block”);
$("#pricing_annual, #annual_output, #monthly_output, #pricing-section-special").css(“color”,"#333");

in vanilla js I am starting out by doing this:
let pricing_annual = document.getElementById(“pricing-annual”);
let annual_output = document.getElementById(“annual_output”);
let monthly_output = document.getElementById(“monthly_output”);
let pricing_section_special = document.getElementById(“pricing-section-special”);

pricing_annual.style.display = ‘block’;
" " etc… etc…

how do I add multiple styles to multiple elements - they do not have similar class names or obviously id’s how do I add the display style “block” and a color of #333 to these elements without adding so many more lines of code? TIA!
~L

2

document.querySelectorAll('#one', '#two', '#three').forEach(x => { x.style.display = 'block'; x.style.color = '#333'})
or alternatively
let matches = document.querySelectorAll('#one', '#two', '#three'); for(let x of matches){ x.style.display = 'block';x.style.color = '#333'}

Sometimes in firefox querySelectorAll() doesn’t like trying to match a single id '#singleId' IDK why, it should in theory match any selector and return a nodelist. Maybe the browser knows that query should only match one item (unless you id’d multiple items the same id(you shouldn’t))

1 Like
3

perfect! Thank you!

2 Likes