jquery样式操作

最新推荐文章于 2022-06-29 14:00:00 发布

原创最新推荐文章于 2022-06-29 14:00:00 发布 · 239 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用jQuery进行元素样式的获取与设置，包括css属性、类名的添加与删除，以及如何通过prop、attr等方法操作元素属性，为前端开发者提供了实用的代码示例。

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","20px");
$("div").css("height","20px");
$("div").css({fontSize:"20px",color:"blue"});

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

$btn.click(function(){
// this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this)

// 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
$(this).addClass('current').siblings().removeClass('current');

               //alert( $(this).index() ; //弹出当前按钮的索引值
               // 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
               $div.eq( $(this).index() ).addClass('active').siblings().removeClass('active');
           })
       })

   </script>
</head>
<body>
   <div class="btns">
       <input type="button" name="" value="01" class="current">
       <input type="button" name="" value="02">
       <input type="button" name="" value="03">
   </div>
   <div class="cons">
       <div class="active">选项卡一的内容</div>
       <div>选项卡二的内容</div>
       <div>选项卡三的内容</div>
   </div>
</body>

属性操作

html() 取出或设置html内容

prop() 取出或设置某个属性的值

 // 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

tesxt()获取或设置text内容

//获取文本内容
var #htm = $('#div').text();
//设置文本内容
$('#div').text('<span>添加文字</span>')

attr()获取或设置某个属性的值

//获取图片的地址
var #src = $('#img').attr('src');
//设置图片的地址
$('#img').attr({src:'my.jpg'});