<!DOCTYPE?html>
<html>
<head>
??<title></title>
??<script?type="text/javascript">
??window.onload=function(){
????var?btn=document.getElementById("btn");
????var?div=document.getElementById("div");
????var?btn2=document.getElementById("btn2");
?????function?addEvent(ele,type,hander){
????????if?(ele.addEventListener)?{
??????????ele.addEventListener(type,hander,false);
????????}else?if(ele.attachEvent){
??????????ele.attachEvent(type,hander);
????????}else{
??????????ele['on'+type]=hander;
????????};
??????}
????
????addEvent(btn,'click',showMsg)
????addEvent(btn2,'click',hideMsg)
????function?showMsg(){
????????if(div.style.display=="none"){
??????????div.style.display="block";
??????????}
????}
????function?hideMsg(){
????????if(div.style.display=="block"){
??????????div.style.display="none";
??????????}
????}
?}
????
??</script>
??<style?type="text/css">
????#div{
??????width:300px;
??????height:300px;
??????background-color:skyblue;
??????display:?none;
????}
??</style>
</head>
<body>
????<button?id="btn">click</button>
????
????<div?id="div"><button?id="btn2">hide</button></div>
????
</body>
</html>雖然這個if判斷語句很多余吧,但突然發現了個問題1.把display屬性用內聯樣式直接放到div里的話,效果可以運行。2.將hideMsg效果合并到showMsg里用else的話也可以運行。但用嵌入式CSS的時候,1的情況無法運行,2的情況在瀏覽器顯示則是點擊一下變成內聯,再點擊一下才有效果。為什么?
JS控制嵌入式CSS時添加了if條件無法運行的問題
MR158
2016-01-31 16:50:14