如何判断css的display属性

2025-10-31 11:08:26

1、在电脑桌面上，选择【JetBrains PhpStorm 2016.3.2】进入。

如何判断css的display属性

2、在“PhpStorm 2016.3.2”中，新建一个新的html文件【test.html】。

如何判断css的display属性

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>

如何判断css的display属性

4、在test.html文件的head之间，引入jquery.js插件文件。

<script type="text/javascript" src="./js/jquery.js"></script>

如何判断css的display属性

5、在test.html文件的head之间，填写上head包含的span的css属性，如下。

<style type="text/css">

.head span{

display:block;

}

</style>

如何判断css的display属性

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属性。

如何判断css的display属性

1、新建html文件。

2、在html文件中输入测试的css和html代码。

3、引入jquery插件。

4、写js功能，通过js功能获取到对应元素的css属性，然后通过switch分开判断。

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。