2013-07-22 35 views
0

考慮下面的例子:顯示隱藏的div,爲什麼代碼在FF/Chrome中工作,但不在IE9中?

<html> 
<head> 
</head> 
<body> 
<style type="text/css"> 
.hide 
{ 
    display: none; 
} 
</style> 
<button style="width:200;height:20;background-color:#B4CFEC;font: bold 10px Verdana" onclick="document.getElementById('CUST_CLASS').classList.remove('hide');" >CUSTOMER DIMENSION</button> 
<div class="hide" id="CUST_CLASS">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
</body> 
</html> 

我使用的document.getElementById( 'ID')classList.remove( '類');。功能在這裏。 我應該使用不同的功能嗎?微軟的東西只有?

+2

IE9不支持'班級名冊',但你可以把它擦亮。 –

+0

@CrazyTrain:shim什麼.....? –

+1

Shim'classList'。只需Google''classList shim'',你就可以找到一些項目。像這樣:https://github.com/remy/polyfills/blob/master/classList.js –

回答

-1

這是可怕的,但刪除指定的類,保留所有其他人:

onclick="document.getElementById('CUST_CLASS').setAttribute('class', document.getElementById('CUST_CLASS').getAttribute('class').replace('hide', ''));" 

至於評論,IE9不支持classList,這樣你就可以到任一墊片,或退回到jQuery的,這將處理瀏覽器兼容。這是jQuery的相當於代碼:

$("#CUST_CLASS").removeClass("hide"); 

但是,如果你的hide類是用於什麼比切換可見性的更多,你可以更加簡化:

$("#CUST_CLASS").hide(); 
$("#CUST_CLASS").show(); 
相關問題