如何使用 querySelector 选择多个元素。

huangapple
go评论82阅读模式
英文:

How to select multiple elements with queryselector

问题

I'm trying to make something that the user selects a color with the first input, and it changes the background color of the body. When the user selects a color in the "Subtitles color" input, it should change the color of both

elements, but the second

isn't changing the color. Can someone help me? I have tried using getElementById and getElementsByClassName, and it won't even select the first child.

英文:

I'm trying to make something that the user select a color with the first input and it changes the background color of the body, and when the user select a color in the "Subtitles color" input it should change the color of both <h2>, but the second <h2> isn't changing the color. Can someone help me? I have tried using getElementById and getElementsByClassName and it won't even select the first child.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const ColorPicker  = document.querySelector(&quot;#input1&quot;);
const ColorCode = document.querySelector(&quot;#input1&quot;).value;
const Body = document.querySelector(&quot;#fundoPagina&quot;);
        
const ColorPicker4  = document.querySelector(&quot;#input4&quot;);
const ColorCode4 = document.querySelector(&quot;#input4&quot;).value;
const subtitulo = document.querySelector(&quot;h2&quot;);
        
        
        // Change color function
        const changeColor = (evt) =&gt; {
          const selectedColor = evt.currentTarget.value;
          ColorCode.value = selectedColor;
          Body.style.backgroundColor = selectedColor;
        };
        
        const changeColor4 = (evt) =&gt; {
        const selectedColor4 = evt.currentTarget.value;
        ColorCode4.value = selectedColor4;
        subtitulo.style.color = selectedColor4;
    };
        
        // Add the Event to your input
        ColorPicker .addEventListener(&quot;input&quot;, changeColor);
        ColorPicker4 .addEventListener(&quot;input&quot;, changeColor4);

<!-- language: lang-css -->

    .inputContent {
    display: flex; 
    text-align:center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    border: 2px solid rgb(66, 66, 66);
    max-width: 890px;
    margin: 0 auto;
    padding: 5px 15px;
    background: rgb(219, 219, 219);
}

#inputColor {
    display: flex;
    flex-direction: column!important;
    align-items: center;
}

#inputColor&gt;p {
    font-size: 12px;
}

#fundoCaixa {
    max-width: 890px;
    margin: 0 auto;
    border: 2px solid rgb(66, 66, 66);
    margin-top: 15px;
    background: rgb(89, 156, 187);
    padding: 5px 15px;
}

<!-- language: lang-html -->

&lt;body id=&quot;fundoPagina&quot;&gt;
    &lt;div class=&quot;inputContent&quot;&gt;
        &lt;div id=&quot;inputColor&quot;&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; id=&quot;input1&quot;&gt;&lt;/input&gt;&lt;p&gt;Cor do fundo da p&#225;gina&lt;/p&gt;&lt;/div&gt;
                &lt;div id=&quot;inputColor&quot;&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; id=&quot;input4&quot;&gt;&lt;/input&gt;&lt;p&gt;Subtitles Color&lt;/p&gt;&lt;/div&gt;

    &lt;/div&gt;
    &lt;main id=&quot;fundoCaixa&quot;&gt;
        &lt;h1 id=&quot;tituloPrincipal&quot;&gt;Linguagens de Programa&#231;&#227;o&lt;/h1&gt;
        &lt;p id=&quot;paragrafo&quot;&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.&lt;/p&gt;
    &lt;h2 id=&quot;linguagemC&quot; class=&quot;subtitulo&quot;&gt;Linguagem C&lt;/h2&gt;
    &lt;h2 id=&quot;linguagemPascal&quot; class=&quot;subtitulo&quot;&gt;Linguagem Pascal&lt;/h2&gt;

&lt;/main&gt;
&lt;/body&gt;

<!-- end snippet -->

I'm trying to make something that the user select a color with the first input and it changes the background color of the body, and when the user select a color in the "Subtitles color" input it should change the color of both <h2>, but the second <h2> isn't changing the color. Can someone help me? I have tried using getElementById and getElementsByClassName and it won't even select the first child.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const ColorPicker  = document.querySelector(&quot;#input1&quot;);
const ColorCode = document.querySelector(&quot;#input1&quot;).value;
const Body = document.querySelector(&quot;#fundoPagina&quot;);
        
const ColorPicker4  = document.querySelector(&quot;#input4&quot;);
const ColorCode4 = document.querySelector(&quot;#input4&quot;).value;
const subtitulo = document.querySelector(&quot;h2&quot;);
        
        
        // Change color function
        const changeColor = (evt) =&gt; {
          const selectedColor = evt.currentTarget.value;
          ColorCode.value = selectedColor;
          Body.style.backgroundColor = selectedColor;
        };
        
        const changeColor4 = (evt) =&gt; {
        const selectedColor4 = evt.currentTarget.value;
        ColorCode4.value = selectedColor4;
        subtitulo.style.color = selectedColor4;
    };
        
        // Add the Event to your input
        ColorPicker .addEventListener(&quot;input&quot;, changeColor);
        ColorPicker4 .addEventListener(&quot;input&quot;, changeColor4);

<!-- language: lang-css -->

    .inputContent {
    display: flex; 
    text-align:center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    border: 2px solid rgb(66, 66, 66);
    max-width: 890px;
    margin: 0 auto;
    padding: 5px 15px;
    background: rgb(219, 219, 219);
}

#inputColor {
    display: flex;
    flex-direction: column!important;
    align-items: center;
}

#inputColor&gt;p {
    font-size: 12px;
}

#fundoCaixa {
    max-width: 890px;
    margin: 0 auto;
    border: 2px solid rgb(66, 66, 66);
    margin-top: 15px;
    background: rgb(89, 156, 187);
    padding: 5px 15px;
}

<!-- language: lang-html -->

&lt;body id=&quot;fundoPagina&quot;&gt;
    &lt;div class=&quot;inputContent&quot;&gt;
        &lt;div id=&quot;inputColor&quot;&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; id=&quot;input1&quot;&gt;&lt;/input&gt;&lt;p&gt;Cor do fundo da p&#225;gina&lt;/p&gt;&lt;/div&gt;
                &lt;div id=&quot;inputColor&quot;&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; id=&quot;input4&quot;&gt;&lt;/input&gt;&lt;p&gt;Subtitles Color&lt;/p&gt;&lt;/div&gt;

    &lt;/div&gt;
    &lt;main id=&quot;fundoCaixa&quot;&gt;
        &lt;h1 id=&quot;tituloPrincipal&quot;&gt;Linguagens de Programa&#231;&#227;o&lt;/h1&gt;
        &lt;p id=&quot;paragrafo&quot;&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.&lt;/p&gt;
    &lt;h2 id=&quot;linguagemC&quot; class=&quot;subtitulo&quot;&gt;Linguagem C&lt;/h2&gt;
    &lt;h2 id=&quot;linguagemPascal&quot; class=&quot;subtitulo&quot;&gt;Linguagem Pascal&lt;/h2&gt;

&lt;/main&gt;
&lt;/body&gt;

<!-- end snippet -->

答案1

得分: 1

尝试使用 querySelectorAll

querySelectorAll 将获取一个节点列表，使用 forEach 来更改所有选定元素的样式。

实际上，您只需要一个函数来实现这一点，您可以通过 &lt;input/&gt; 中的 data-attribute 更改样式属性和选定的元素。

const colorPickers = document.querySelectorAll('input')
colorPickers.forEach(colorPicker => {
  colorPicker.addEventListener('input', ({
    target
  }) => {
    const value = target.value
    const elements = target.getAttribute('data-element')
    const style = target.getAttribute('data-style')
    document.querySelectorAll(elements).forEach(elem => {
      elem.style[style] = value
    })
  })
})

.inputContent {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  border: 2px solid rgb(66, 66, 66);
  max-width: 890px;
  margin: 0 auto;
  padding: 5px 15px;
  background: rgb(219, 219, 219);
}

#inputColor {
  display: flex;
  flex-direction: column !important;
  align-items: center;
}

#inputColor>p {
  font-size: 12px;
}

#fundoCaixa {
  max-width: 890px;
  margin: 0 auto;
  border: 2px solid rgb(66, 66, 66);
  margin-top: 15px;
  background: rgb(89, 156, 187);
  padding: 5px 15px;
}

<body id="fundoPagina">
  <div class="inputContent">
    <div><input type="color" value="#000" data-element="body" data-style="backgroundColor" />
      <p>Cor do fundo da página</p>
    </div>
    <div><input type="color" value="#000" data-element="h2" data-style="color" />
      <p>Subtitles Color</p>
    </div>
  </div>
  <main id="fundoCaixa">
    <h1 id="tituloPrincipal">Linguagens de Programação</h1>
    <p id="paragrafo">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.</p>
    <h2 id="linguagemC" class="subtitulo">Linguagem C</h2>
    <h2 id="linguagemPascal" class="subtitulo">Linguagem Pascal</h2>
  </main>
</body>
英文:

Try querySelectorAll

querySelectorAll will get a nodelist, use foreach to change style for all of selected elements.

And you actually only need one function to do this, you can change the style attribute and selected element by data-attribute in &lt;input/&gt;.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const colorPickers = document.querySelectorAll(&#39;input&#39;)
colorPickers.forEach(colorPicker =&gt; {
  colorPicker.addEventListener(&#39;input&#39;, ({
    target
  }) =&gt; {
    const value = target.value
    const elements = target.getAttribute(&#39;data-element&#39;)
    const style = target.getAttribute(&#39;data-style&#39;)
    document.querySelectorAll(elements).forEach(elem =&gt; {
      elem.style[style] = value
    })
  })
})

<!-- language: lang-css -->

.inputContent {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  border: 2px solid rgb(66, 66, 66);
  max-width: 890px;
  margin: 0 auto;
  padding: 5px 15px;
  background: rgb(219, 219, 219);
}

#inputColor {
  display: flex;
  flex-direction: column !important;
  align-items: center;
}

#inputColor&gt;p {
  font-size: 12px;
}

#fundoCaixa {
  max-width: 890px;
  margin: 0 auto;
  border: 2px solid rgb(66, 66, 66);
  margin-top: 15px;
  background: rgb(89, 156, 187);
  padding: 5px 15px;
}

<!-- language: lang-html -->

&lt;body id=&quot;fundoPagina&quot;&gt;
  &lt;div class=&quot;inputContent&quot;&gt;
    &lt;div&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; data-element=&quot;body&quot; data-style=&quot;backgroundColor&quot; /&gt;
      &lt;p&gt;Cor do fundo da p&#225;gina&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; data-element=&quot;h2&quot; data-style=&quot;color&quot; /&gt;
      &lt;p&gt;Subtitles Color&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;main id=&quot;fundoCaixa&quot;&gt;
    &lt;h1 id=&quot;tituloPrincipal&quot;&gt;Linguagens de Programa&#231;&#227;o&lt;/h1&gt;
    &lt;p id=&quot;paragrafo&quot;&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.&lt;/p&gt;
    &lt;h2 id=&quot;linguagemC&quot; class=&quot;subtitulo&quot;&gt;Linguagem C&lt;/h2&gt;
    &lt;h2 id=&quot;linguagemPascal&quot; class=&quot;subtitulo&quot;&gt;Linguagem Pascal&lt;/h2&gt;
  &lt;/main&gt;
&lt;/body&gt;

<!-- end snippet -->

答案2

得分: 0

我在你的代码中进行了一些小的更改。这些更改用&lt;-- edit标记出来了。

const ColorPicker = document.querySelector("#input1");
const ColorCode = document.querySelector("#input1").value;
const Body = document.querySelector("#fundoPagina");

const ColorPicker4 = document.querySelector("#input4");
const ColorCode4 = document.querySelector("#input4").value;
const subtitulo = document.querySelectorAll("h2"); // <-- edit

const changeColor = (evt) => {
  const selectedColor = evt.currentTarget.value;
  ColorCode.value = selectedColor;
  Body.style.backgroundColor = selectedColor;
};

const changeColor4 = (evt) => {
  const selectedColor4 = evt.currentTarget.value;
  ColorCode4.value = selectedColor4;
  subtitulo.forEach((h) => (h.style.color = selectedColor4)); // <-- edit
};

// 将事件添加到你的输入元素
ColorPicker.addEventListener("input", changeColor);
ColorPicker4.addEventListener("input", changeColor4);

.inputContent {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  border: 2px solid rgb(66, 66, 66);
  max-width: 890px;
  margin: 0 auto;
  padding: 5px 15px;
  background: rgb(219, 219, 219);
}

#inputColor {
  display: flex;
  flex-direction: column !important;
  align-items: center;
}

#inputColor > p {
  font-size: 12px;
}

#fundoCaixa {
  max-width: 890px;
  margin: 0 auto;
  border: 2px solid rgb(66, 66, 66);
  margin-top: 15px;
  background: rgb(89, 156, 187);
  padding: 5px 15px;
}

<body id="fundoPagina">
  <div class="inputContent">
    <div id="inputColor"><input type="color" value="#000" id="input1"></input><p>Cor do fundo da página</p></div>
    <div id="inputColor"><input type="color" value="#000" id="input4"></input><p>Subtitles Color</p></div>
  </div>
  <main id="fundoCaixa">
    <h1 id="tituloPrincipal">Linguagens de Programação</h1>
    <p id="paragrafo">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium
      est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.</p>
    <h2 id="linguagemC" class="subtitulo">Linguagem C</h2>
    <h2 id="linguagemPascal" class="subtitulo">Linguagem Pascal</h2>
  </main>
</body>

如果你需要进一步的帮助，请告诉我。

英文:

I made some minor change in your code.
that change highlighted with &lt;-- edit

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const ColorPicker  = document.querySelector(&quot;#input1&quot;);
const ColorCode = document.querySelector(&quot;#input1&quot;).value;
const Body = document.querySelector(&quot;#fundoPagina&quot;);
        
const ColorPicker4  = document.querySelector(&quot;#input4&quot;);
const ColorCode4 = document.querySelector(&quot;#input4&quot;).value;
const subtitulo = document.querySelectorAll(&quot;h2&quot;); //&lt;-- edit
 
        const changeColor = (evt) =&gt; {
          const selectedColor = evt.currentTarget.value;
          ColorCode.value = selectedColor;
          Body.style.backgroundColor = selectedColor;
        };
        
        const changeColor4 = (evt) =&gt; {
        const selectedColor4 = evt.currentTarget.value;
        ColorCode4.value = selectedColor4;
        subtitulo.forEach( h =&gt; h.style.color = selectedColor4  ) //&lt;-- edit
    };
        
        // Add the Event to your input
        ColorPicker .addEventListener(&quot;input&quot;, changeColor);
        ColorPicker4 .addEventListener(&quot;input&quot;, changeColor4);

<!-- language: lang-css -->

.inputContent {
    display: flex; 
    text-align:center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    border: 2px solid rgb(66, 66, 66);
    max-width: 890px;
    margin: 0 auto;
    padding: 5px 15px;
    background: rgb(219, 219, 219);
}

#inputColor {
    display: flex;
    flex-direction: column!important;
    align-items: center;
}

#inputColor&gt;p {
    font-size: 12px;
}

#fundoCaixa {
    max-width: 890px;
    margin: 0 auto;
    border: 2px solid rgb(66, 66, 66);
    margin-top: 15px;
    background: rgb(89, 156, 187);
    padding: 5px 15px;
}

<!-- language: lang-html -->

&lt;body id=&quot;fundoPagina&quot;&gt;
    &lt;div class=&quot;inputContent&quot;&gt;
        &lt;div id=&quot;inputColor&quot;&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; id=&quot;input1&quot;&gt;&lt;/input&gt;&lt;p&gt;Cor do fundo da p&#225;gina&lt;/p&gt;&lt;/div&gt;
                &lt;div id=&quot;inputColor&quot;&gt;&lt;input type=&quot;color&quot; value=&quot;#000&quot; id=&quot;input4&quot;&gt;&lt;/input&gt;&lt;p&gt;Subtitles Color&lt;/p&gt;&lt;/div&gt;

    &lt;/div&gt;
    &lt;main id=&quot;fundoCaixa&quot;&gt;
        &lt;h1 id=&quot;tituloPrincipal&quot;&gt;Linguagens de Programa&#231;&#227;o&lt;/h1&gt;
        &lt;p id=&quot;paragrafo&quot;&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum nihil incidunt sint laudantium est earum optio ducimus in facilis quisquam. Tempore iste dignissimos.&lt;/p&gt;
    &lt;h2 id=&quot;linguagemC&quot; class=&quot;subtitulo&quot;&gt;Linguagem C&lt;/h2&gt;
    &lt;h2 id=&quot;linguagemPascal&quot; class=&quot;subtitulo&quot;&gt;Linguagem Pascal&lt;/h2&gt;

&lt;/main&gt;
&lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 09:46:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76577605.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定