菜鸟教程
教程 jquery tutorial

属性与样式

jQuery 提供方便的方法操作元素的属性和样式，使页面交互效果更加丰富。

操作属性

  • 获取属性值
js 
  var href = $("a").attr("href");
  • 设置属性值
js 
  $("a").attr("href", "https://www.example.com");
  • 移除属性
js 
  $("img").removeAttr("alt");

操作样式

  • 获取样式
js 
  var color = $("p").css("color");
  • 设置单个样式
js 
  $("p").css("color", "red");
  • 设置多个样式
js 
  $("p").css({
    "font-size": "18px",
    "background-color": "#eee",
  });

操作 CSS 类

  • 添加类
js 
  $("div").addClass("active");
  • 移除类
js 
  $("div").removeClass("active");
  • 切换类
js 
  $("div").toggleClass("active");

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 修改链接地址
    $("a").attr("href", "https://cdnjs.com");
    // 设置段落颜色和字体大小
    $("p").css({
      color: "blue",
      "font-size": "16px",
    });
    // 点击按钮添加/移除类
    $("#btn").click(function () {
      $("div").toggleClass("highlight");
    });
  });
</script>

<a href="#">CDN链接</a>
<p>这是一段文本。</p>
<div>操作 CSS 类的元素</div>
<button id="btn">切换高亮</button>


<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>

相关内容