更改标题样式在 Chrome 中不起作用

Changing header style not working in Chrome

本文关键字：Chrome 不起作用 样式 标题      更新时间：2023-09-26

我正在尝试更改h1的外观。我已经完成了部分代码，但我注意到它在 Chrome 中不起作用。有人知道为什么吗？如果您有建议如何更好地编写下面的代码：

链接： http://codepen.io/Winterfox/pen/KzRbpZ

window.onload = function() {
var ownHeading = document.getElementById("heading");
var newHeading = document.getElementById("newheading");
ownHeading.addEventListener("input", buildLayout);
function buildLayout() {
   newHeading.innerHTML = ownHeading.value;
};
/*---------------------------------------------------------*/
var changeStyleBtn = document.getElementsByClassName("changestyle-btn");
 var changeStyleUl = document.getElementById('change-h-font');
for (var i = 0; i < changeStyleBtn.length; i++) {
    changeStyleBtn[i].addEventListener('click', changeStyle, false);
}
function changeStyle() {
  changeStyleUl.style.display = "block";
};
/*-------------------------------------------------------*/
var changeStyleLi = changeStyleUl.getElementsByTagName('li');
for (var i = 0; i < changeStyleLi.length; i++) {
    changeStyleLi[i].addEventListener('click', changeFont, false);
 }
function changeFont() {
  // here it stops working in chrome (can't click on lis)
  alert("clic");
  console.log(this);
};
};

问题似乎与嵌入ul元素有关#changestyle-btn div 

<div class="changestyle-btn">+
    <ul class="changestyle" id="change-h-font">
        <li>1</li>
        <li>2</li>
    </ul>
</div>

一旦我将元素移出div它在 Chrome 中就可以正常工作。

<div class="changestyle-btn">+</div>
<ul class="changestyle" id="change-h-font">
    <li>1</li>
    <li>2</li>
</ul>

这很可能是因为您已经将单击事件绑定到#changestyle-btn div因此当您尝试单击 li 元素时，它只会触发第一个事件。

相关文章：