更改標題樣式在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中不起作用

回答

相關問題