jquery给display赋值

Hey小伙伴们，今天咱们来聊聊如何在网页中用jQuery给元素的display属性赋值，这可是个实用小技巧，能让你的网页动起来，增加交互性哦！

得知道啥是display属性，这个属性决定了HTML元素是显示还是隐藏，常见的值有"block"、"inline"、"none"等。"none"就是让元素完全隐藏，"block"则是让元素独占一行显示。

怎么用jQuery来控制这个属性呢？很简单，我们可以用.css()方法，这个方法可以让我们轻松地改变元素的CSS属性。

举个栗子，假设我们有一个按钮和一个div，我们想要点击按钮时，让div显示或隐藏，代码可以是这样的：

```html

```

在这个例子中，我们首先引入了jQuery库，我们用$(document).ready()确保DOM完全加载后再执行我们的代码，点击按钮时，我们用$("#myDiv").css("display", "block")让div显示出来。

如果你想让div在点击时切换显示和隐藏状态，可以这样做：

```javascript

$("#myBtn").click(function(){

$("#myDiv").css("display", function(index, currentValue) {

return currentValue === "none" ? "block" : "none";

});

});

```

这里，我们用了一个函数作为.css()方法的第二个参数，这个函数会检查当前的display值，如果是"none"，就返回"block"，反之则返回"none"，这样，每次点击按钮，div的状态就会在显示和隐藏之间切换。

jQuery的.css()方法真的很强大，它不仅可以设置单一属性，还可以同时设置多个属性，你想同时改变div的display和background-color，可以这样写：

```javascript

$("#myDiv").css({

"display": "block",

"background-color": "yellow"

});

```

这样，div不仅会显示出来，背景色也会变黄。

jQuery的.css()方法还有很多其他的用法和技巧，比如获取元素的CSS属性值，或者为元素添加多个CSS类，这些都能在你的网页设计中发挥大作用。

获取元素的CSS属性值：

```javascript

var displayValue = $("#myDiv").css("display");

console.log(displayValue); // 打印当前的display值

```

或者，为元素添加多个CSS类：

```javascript

$("#myDiv").addClass("myClass1 myClass2");

```

这样，"myClass1"和"myClass2"这两个CSS类就会被同时添加到div上。

jQuery的.css()方法是一个非常实用的工具，能让你轻松地控制网页元素的样式，通过改变display属性，你可以让元素显示或隐藏，增加网页的交互性，这只是jQuery强大功能的冰山一角，还有更多好玩的技巧等着你去和实践。

下次当你需要控制网页元素的显示和隐藏时，不妨试试jQuery的.css()方法，它会让你的工作变得更加简单和高效，记得多实践，多尝试，这样你就能更好地jQuery，让你的网页设计更加出色！

好啦，今天的分享就到这里，如果你对jQuery还有其他问题，或者想要了解更多的技巧，欢迎继续交流，让我们一起学习，一起进步！