# JavaScript - Apply Multiple Styles to Multiple Elements

**URL:** <https://forum.kirupa.com/t/javascript-apply-multiple-styles-to-multiple-elements/647915>\
**Category:** web dev\
**Created:** [June 14, 2021, 9:28pm UTC](https://forum.kirupa.com/t/javascript-apply-multiple-styles-to-multiple-elements/647915 "2021-06-14T21:28:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![leellbee](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@leellbee](https://forum.kirupa.com/u/leellbee)\
**Post date:** [June 14, 2021, 9:28pm UTC](https://forum.kirupa.com/t/javascript-apply-multiple-styles-to-multiple-elements/647915/1 "2021-06-14T21:28:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [June 14, 2021, 10:23pm UTC](https://forum.kirupa.com/t/javascript-apply-multiple-styles-to-multiple-elements/647915/2 "2021-06-14T22:23:57Z")

</div>

`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))

---

<div class="post-metadata">

**Author:** ![leellbee](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@leellbee](https://forum.kirupa.com/u/leellbee)\
**Post date:** [June 15, 2021, 1:34pm UTC](https://forum.kirupa.com/t/javascript-apply-multiple-styles-to-multiple-elements/647915/3 "2021-06-15T13:34:15Z")

</div>

perfect! Thank you!