点击按钮调用JS函数修改div字体颜色失效问题咨询

你的代码没有语法错误，之前的两个猜测都不成立：color是可继承属性，给外层div设置color本身就可以传递给内部子元素，document.getElementById("black").style.color="black"这个DOM操作写法本身也是合法的。
失效是两个原因叠加导致的：

• 样式优先级问题：你给div内部的li元素都通过class单独设置了字体颜色，CSS里继承样式的优先级是最低的，只要子元素自身给color设了值，不管选择器权重多低，都会覆盖从父级继承来的黑色，所以父级设置的颜色透不到子元素上。
• 命名冲突问题：你的目标div的id是black，绑定点击事件的函数名也叫black。浏览器默认会把带id的DOM元素挂载到全局window对象上作为属性，这时候你声明的black函数会被id为black的DOM元素覆盖，点击按钮时实际调用的不是函数，会直接报错。

方法1：修改函数名+遍历设置子元素颜色 #

直接修改函数名避免命名冲突，同时遍历目标div下的所有子元素设置颜色，覆盖原有class的样式：

// 函数名不要和元素id重名
function setTextBlack() {
  const container = document.getElementById("black");
  // 先给父级设颜色
  container.style.color = "black";
  // 遍历所有后代元素，强制设置黑色
  container.querySelectorAll("*").forEach(item => {
    item.style.color = "black";
  })
}

对应按钮的onclick绑定也要同步修改：

<button onclick="setTextBlack()">Black</button>

方法2：用CSS类控制（更易维护） #

提前定义好通用的文字黑色类，用选择器权重保证覆盖原有样式：

.black-text, .black-text * {
  color: #000 !important;
}

JS里只需要做类名切换即可，不需要逐个操作子元素：

function setTextBlack() {
  document.getElementById("black").classList.add("black-text");
}

JS部分 #

function black() {
  document.getElementById("black").style.color = "black";
}

HTML部分 #

<h1 class="eins">Farben</h1>


<p class="blau">1. blau</p>
<p class="pink">2. pink</p>

<h1 class="zwei">Sonnenfarben</h1>

<div id="black">
  <ul>
    <li class="rot">rot</li>
    <li class="orange">orange</li>
    <li class="gelb">gelb</li>
  </ul>
</div>

<p class="braun">3. braun</p>
<p class="grau">4. grau</p>


<h1 class="drei">Grüntöne</h1>
<p class="teal">I. teal</p>
<p class="limegreen">II.limegreen</p>
<p class="green">III. green</p>

<button onclick="black()">Black</button>

CSS优先级提示：优先级从高到低依次为：行内样式 > ID选择器 > 类/属性/伪类选择器 > 标签选择器 > 浏览器默认样式 > 父级继承样式，继承样式权重最低，永远会被子元素自身设置的同属性样式覆盖。

内容的提问来源于stack exchange，提问作者motionlesseuphoric