使用按钮更改颜色文本

Question

我尝试使用javascript更改html的文本颜色。 经过几次尝试，我意识到如果在CSS中更改颜色，则无法更改颜色。 所以基本上，这意味着CSS会在最后执行？ 如果我也在CSS中更改了按钮，如何在单击按钮后更改文本的颜色？ 对不起，我是新来的

function changecol()
      { 
          var html=document.body;

          html.style.backgroundColor='black';
          html.style.color='white';

      }

期望我的html中的所有行都变成白色，但是只有那些我未应用CSS的行才变成白色

Answer 1

这是一种jQuery方法，将在单击按钮时更改颜色：

 $("#butt").on("click",function(){ $(".color").css("background-color","red"); $(".color").css("color","white"); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="color">HALLO</div> <button id="butt">Change Color</button> 

Answer 2

您可能正在处理继承问题。 在您的情况下，您要在主体上放置样式，并且唯一从主体继承样式的元素是没有样式的元素。 为了解决这个问题，我建议直接将样式应用于每个元素。

尝试这个：

function changecol(){
  document.body.style.backgroundColor='black';
  document.body.style.color='white';

  // change background color of each element 
  var elements = document.querySelectorAll('*');
  for(let i=0;i<elements.length;i++){
    elements[i].style.backgroundColor='black';
    elements[i].style.color='white';
  }
}