<!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的情况在浏览器显示则是点击一下变成内联，再点击一下才有效果。为什么？
2 回答
夫唯不争
TA贡献3条经验 获得超1个赞
window.onload=function(){
var btn=document.getElementById("btn");
var div=document.getElementById("div");
var btn2=document.getElementById("btn2");
var divStyle = div.currentStyle ? div.currentStyle : getComputedStyle(div,null); //获取元素当前的属性
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(divStyle.display=="none"){
div.style.display="block";
}
}
function hideMsg(){
if(divStyle.display=="block"){
div.style.display="none";
}
}
}
添加回答
举报
0/150
提交
取消