jQuery获取div的style

原创

mob64ca12f10f72 2024-02-09 05:08:21 ©著作权

文章标签 css jQuery 背景颜色 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f10f72的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery获取div的style

在网页开发中，我们经常需要获取和修改HTML元素的样式。jQuery是一种快速、简洁的JavaScript库，可以帮助我们在HTML文档中使用JavaScript更加方便。在本文中，我们将介绍如何使用jQuery获取div元素的样式，并提供相应的代码示例。

获取div元素的样式

要获取div元素的样式，我们可以使用jQuery中的css()方法。这个方法允许我们获取或设置元素的CSS属性。

下面是一个获取div元素样式的基本示例：

// 获取div元素的背景颜色
var bgColor = $("div").css("background-color");
console.log("背景颜色为：" + bgColor);

上面的代码通过$("div")选择器选中了所有的div元素，并使用css("background-color")方法获取了它们的背景颜色。最后，使用console.log()方法将背景颜色输出到控制台。

修改div元素的样式

要修改div元素的样式，我们可以使用css()方法的另一种形式，即传入一个包含CSS属性和值的对象。

下面是一个修改div元素样式的示例：

// 修改div元素的边框样式
$("div").css({
  "border": "1px solid red",
  "padding": "10px"
});

上面的代码将所有的div元素的边框样式设置为红色的实线边框，并设置了10像素的内边距。

示例应用

下面我们将通过一个示例应用来演示如何使用jQuery获取和修改div元素的样式。

<!DOCTYPE html>
<html>
<head>
  <script src="
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">这是一个div元素</div>
  <script>
    // 获取div元素的宽度和高度
    var width = $(".box").width();
    var height = $(".box").height();
    console.log("宽度：" + width + "，高度：" + height);

    // 修改div元素的样式
    $(".box").css({
      "background-color": "blue",
      "color": "white"
    });
  </script>
</body>
</html>

上面的代码中，我们有一个class为"box"的div元素，它的宽度为200像素，高度为200像素，背景颜色为黄色。首先，我们使用$(".box").width()和$(".box").height()方法获取了它的宽度和高度，并将结果输出到控制台。然后，我们使用$(".box").css()方法将它的背景颜色改为蓝色，并将文字颜色改为白色。