200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html attr src jQuery中css()和attr()方法的区别

html attr src jQuery中css()和attr()方法的区别

时间:2024-08-06 01:30:26

相关推荐

html attr src jQuery中css()和attr()方法的区别

方法介绍:

css():

html代码:

jQuery代码:

var oBox = $("#box");

// 只有一个参数时,是获取对应样式的值

console.log($("#box").css("width"));// 返回300px

// 两个参数时,是设置对应的样式属性

oBox.css("width", "400");

console.log($("#box").css("width"));// 返回400px

// 也支持对象形式进行设置样式

oBox.css({

"width": 500,

"height": "500px",

"background-color": "yellow"

});

attr():

html代码:

jQuery代码:

var oBox = $("#box");

var oImg = $("#pic");

// 一个参数为读取对应的属性,属性的都可以读取,包括style

console.log(oImg.attr("id"));// 返回pic

console.log(oImg.attr("src"));// 返回images/0.jpg

// 设置div(oBox)上面的width属性为400

console.log(oBox.attr("width", "400"));

// 假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面 ,如oBox.attr("data-width","100px");,使用这个,oBox的Html元素上面就会新增一个data-width的属性

attr()同样可以设置style样式:

html代码:

jQuery代码:

var oBox = $("#box");

//这里有一个重置了行内的style样式的现象,background-color不再有效

oBox.attr("style", "width: 310px;height: 110px");

总结:

css()方法是获取/修改样式属性(和style有关)的方法;

attr()是获取/修改元素的属性(和Html标签有关)的方法;

attr()和css()对style的操作都是针对行内样式。

style也是元素的属性,attr()同样可以对他进行操作,所以在功能上css()可以看成是attr()的子集。

attr()操作返回的是string,css()操作返回的是object。

拓展:

prop()方法是获取/修改元素的自有属性的方法,不包括自定义的属性。

html代码:

jQuery代码:

var oBox = $("#box");

console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的

我是初学者水平有限,如有纰漏欢迎指正,共同学习。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。