JS三元运算符、switch语句例子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a772116804/article/details/80351886

三元运算符:

如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

oBth.onclick=function(){
        if (oUl.style.display=='block') {
            oUl.style.display=='none';
        }else{
            oUl.style.display=='block';
        }
    }

用三目运算符;

oBth.onclick=function(){
    oUl.style.display == "block" ? oUl.style.display="none" : oUl.style.display="block"
}

精简:

oBth.onclick=function(){
    var style = oUl.style.display;
    oUl.style.display= style == "block" ? "none":"block"  //这样写的话就一定不能忘了把运算结果重新赋值给元素 - -
  //oUl.style.display= (style == "block" ? "none":"block") 可读性更高
}
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		// 不是所有元素都能够接受键盘事件,有焦点就可以
		document.onkeydown = function(event){
			switch(event.keyCode){
				case 37:
				oDiv.style.left = oDiv.offsetLeft - 10+'px';
				break;
				case 38:
				oDiv.style.top = oDiv.offsetTop - 10+'px';
				break;
				case 39:
				oDiv.style.left = oDiv.offsetLeft + 10+'px';
				break;
				case 40:
				oDiv.style.top =oDiv.offsetTop + 10+'px';
				break;
				default://default 关键词来规定匹配不存在时做的事情
				oDiv.style.top = 0;
			}
		}
	}
</script>

 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页