javascript query selector issue-CodePudding

I am trying to select nested h2 tag by queryselector in javascript, but this seems like not working, I do not see any result on page.

var changeTextForBundle = document.querySelector('.picky-bundler-container .picky-custom-html h2');      
      changeTextForBundle.style.background-color:='#363636';

HTML File

<div data-v-3efab0bc="" class="picky-bundler-container picky-widget">
    <div data-v-3c43f93f="" data-v-3efab0bc="" class="picky-custom-html">
        <h2 style="width:100%; display:flex; justify-content:center; align-items:center;">Frequently Bought Together</h2>
    </div>
</div>

CodePudding user response：

You're using strange syntax.

var changeTextForBundle = document.querySelector('.picky-bundler-container .picky-custom-html h2');
changeTextForBundle.style.backgroundColor='#363636';

should work better ;)

CodePudding user response：

I'm not certain if you have a problem with the CSS selector in querySelector, but you may want to use querySelectorAll to match each.

What doesn't look right is trying to set the background-color in your JavaScript code. Based on this page, you should change the background-color setting in JavaScript as follows:

var changeTextForBundle = document.querySelector('.picky-bundler-container .picky-custom-html h2');      
changeTextForBundle.style.backgroundColor = '#363636';

If you would like to use the querySelectorAll option, the following code would perform the same task for all elements matching your selector string:

var changeTextForBundle = document.querySelectorAll(
  ".picky-bundler-container .picky-custom-html h2"
);
changeTextForBundle.forEach(function (element) {
  element.style.backgroundColor = "#363636";
});