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';
  }
}

使用按钮更改颜色文本

2 个答案: