jQuery之CSS属性

最新推荐文章于 2022-08-13 20:13:11 发布

My_____Dream

最新推荐文章于 2022-08-13 20:13:11 发布

阅读量683

点赞数

分类专栏： JQ

本文链接：https://blog.csdn.net/My_____Dream/article/details/79215705

版权

JQ 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery之CSS属性

一、属性和css操作总结:

对属性的操作:
attr():设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性 json
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称"):移除指定属性
//添加class属性的时候
// attr("class","值");
addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");

对css操作:操作元素的style属性
css():获取或者设置css样式
方式1:获取
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
获取元素的尺寸:
width()
height()

二、代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//页面加载
$(document).ready(function(){
var a=$("input");
//增加一个属性
a.attr("value","123");
//增加多个属性
a.attr({
"title":"123",
"className":"1"
});
var b= $("div");
//增加一个属性
b.css("background-color","red");
//增加多个属性
b.css({
"height":"30px",
"width":"30px"
});
//获取元素的尺寸
alert(a.width());
alert(b.height());
});

</script>
<body>
<input type="text" />
<div>

</div>
</body>
</html>