如何判断css的display属性
1、在电脑桌面上，选择【JetBrains PhpStorm 2016.3.2】进入。
2、在“PhpStorm 2016.3.2”中，新建一个新的html文件【test.html】。
3、在“test.html”文件中，填写如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断css的display属性 </title>
</head>
<body>
<div class="head" id="head">
<span>判断css的display属性</span>
</div>
</body>
</html>
4、在test.html文件的head之间，引入jquery.js插件文件。
<script type="text/javascript" src="./js/jquery.js"></script>
5、在test.html文件的head之间，填写上head包含的span的css属性，如下。
<style type="text/css">
.head span{
display:block;
}
</style>
6、在test.html文件的head之间，写入判断css的display属性的js功能。
<script type="text/javascript">
$(function(){
$mydiv=$(".head span");
$display=$mydiv.css("display");
switch($display){
case "none": alert("none");break;
case "block": alert("block");break;
case "inline": alert("inline");break;
case "inline-block": alert("inline-block");break;
default:alert("other");break;
}
});
</script>
其中：
$mydiv=$(".head span");
$display=$mydiv.css("display");
这两句是获取css的display属性。
switch($display){
case "none": alert("none");break;
case "block": alert("block");break;
case "inline": alert("inline");break;
case "inline-block": alert("inline-block");break;
default:alert("other");break;
}
这个switch case语句是判断display属性。
1、新建html文件。
2、在html文件中输入测试的css和html代码。
3、引入jquery插件。
4、写js功能，通过js功能获取到对应元素的css属性，然后通过switch分开判断。