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

我试图改变h1的外观。我已经完成了部分代码，但是我注意到它在Chrome中无法使用。有人知道为什么如果你有一个建议，如何更好地编写代码如下：更改标题样式在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); 
}; 

};

来源

2016-04-23 Winterfox

您可以用注释标记代码行，哪里遇到问题？这是什么“不起作用”？你想达到什么目的？我已经看到了codepen链接它适用于我。 –

这是最后一行，您尝试点击codepen中显示的lis。 – Winterfox

它确实有用？我在Chrome浏览器上。点击li会显示警报。 Chrome：版本49.0.2623.87（64位） –

问题似乎是与ul元素嵌入#changestyle-btndiv

<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>

这很可能是因为您已经束缚一个click事件到#changestyle-btndiv所以当你试图点击li元素它只是发射的第一个事件。

来源

2016-04-23 10:18:57

但在Firefox中，它只是工作。 – zjk

@zjk它很可能就是Firefox解释JS的方式，Chrome在使用'click'绑定重叠元素时可能会更严格一些 –

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

回答

相关问题