CODEWITHSUNDEEP
queryselector
bryanaps
bryanaps

Reputation: 1

Question about document.querySelector multiple elements

This works with one element but not multiple elements (such as #container p, #container h2):

<button id="small" type="button" onclick="changeFontSize(this)">-</button>
<button id="big" type="button" onclick="changeFontSize(this)">+</button>

<script>function changeFontSize(target) {
  var demo = document.querySelector('#container p','#container h2');
  var computedStyle = window.getComputedStyle
    ? getComputedStyle(demo)
    : demo.currentStyle;
  var fontSize;

  if (computedStyle) {
    fontSize = parseFloat(computedStyle && computedStyle.fontSize);

    if (target == document.getElementById("big")) {
      fontSize += 1;
    } else if (target == document.getElementById("small")) {
      fontSize -= 1;
    }
    demo.style.fontSize = fontSize + "px";
  } 
}
</script>

Upvotes: 0

Views: 2255

Answers (2)

Marc
Marc

Reputation: 5465

With the use of querySelectAll the correct syntax is as follows:


const demo = document.querySelector('#container').querySelectorAll('p, h2');

for(const dom of demo) {

  const computedStyle = window.getComputedStyle
    ? getComputedStyle(dom)
    : demo.currentStyle;

  let fontSize;

  if (computedStyle) {

    fontSize = parseFloat(computedStyle && computedStyle.fontSize);

    if (target == document.getElementById("big")) {

     fontSize += 1;

    } else if (target == document.getElementById("small")) {

     fontSize -= 1;

    }

    dom.style.fontSize = fontSize + "px";
  }

}

Alternative

On a separate note, if you really want to manipulate the font size of an entire site via a user adjustable setting then consider setting a font size on the <body> tag and then using rem (root em) for style font sizing on everything else.

document.querySelector('html').style.fontSize = '12px';

window.fontSize = function (step) {

  const dom = document.querySelector('html')

  const size = parseInt(dom.style.fontSize);

  dom.style.fontSize = (size + step) + 'px'

}
h1 {
 font-size: 4rem;
}

h2 {
 font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

p.caption {
  font-size: 0.8rem;
}
<body>

  <div>

    <button onClick="fontSize(-1)">Decrease</button>

    <button onClick="fontSize(1)">Increase</button>

  </div>

  <h1>Heading 1</h1>

  <h2>Heading 2</h2>

  <p>Paragraph</p>

  <p class="caption">A tiny caption</p>
  
</body>

Upvotes: 1

Chandan
Chandan

Reputation: 11807

Option 1

You can either select one by one using document.querySelector and assign to different variable

var v1 = document.querySelector('#container p');
var v2 = document.querySelector('#container h2');

Option 2

You can assign unique id to each element then select using querySelector and assign to different variable

var v1 = document.querySelector('#first_element');
var v2 = document.querySelector('#second_element');

Option 3

You can assign class to elements you want to select and then use querySelectorAll to select all elements with that class

var v1 = document.querySelectorAll('.all_elements');

Note: querySelector return single element and querySelectorAll return multiple elements so you need to handle them accordingly

Upvotes: 0

Related Questions