jQuerry css/属性/尺寸

最新推荐文章于 2023-02-13 00:13:45 发布

原创最新推荐文章于 2023-02-13 00:13:45 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

jQuerry 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了使用jQuery库来操作DOM元素的属性、类名、尺寸及CSS样式的方法。包括如何获取和设置属性值、增删类名、调整元素尺寸以及读写CSS样式。

属性

.attr() .removeAttr()

var title = $("em").attr("title");
var title = $("em").attr("title","fuck");
$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});  //和css 的属性设置类似

获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性()。

<input type="text" title="hello there" />
input.removeAttr("title")
title='undefined'

.prop() .removeProp()

$("input").prop("disabled", false);
$("input").prop("checked", true);
property 特性  attribute 属性 
 
.removeProp( "disabled" )

disabled= 'undefined'

.val()

(主要用于获取表单元素的值，如input, select 和 textarea)
<input type="text" value="sad"> val=value 他是属性

Class

.addClass() .removeClass() .hasClass() .toggleClass()

$("p").addClass("myClass yourClass");
	
$("p").removeClass("myClass noClass").addClass("yourClass");

$("p").addClass(function(index){
    return "myClass "+"yourClass-"+index;
});//index 传入的参数

$('#mydiv').hasClass('foo')  如果有该Class 则返回布尔值
$('#mydiv').toggleClass('foo')  如果存在就删除,不存在就添加

尺寸

.height() .width() .height(20[px]/'auto'/'20%') .innerheight .innerwidht .outheight .outwidth

width/height 获取匹配元素集合中的第一个元素的当前计算高度值。
  当调用.height(value)方法的时候，这个“value”参数可以是一个字符串（数字加单位）或者是一个数字。如
果这个“value”参数只提供一个数字，jQuery会自动加上单位px。如果只提供一个字符串，任何有效的CSS尺寸都
可以为高度赋值（就像100px, 50%, 或者 auto）。注意在现代浏览器中，CSS高度属性不包含padding, 
border, 或者 margin。

innerHeight/innerWidth
用于获得匹配集合中第一个元素的当前计算的内部高度（包括padding，但不包括border），或 设置每一个匹配
元素的内部高度。

outHeight/outWidth
获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin） 或设置每个匹配
元素的外部高度。p.outerHeight( true ) 包括 margin  p.outerHeight() 不包括

css

获取
.css('background') 获取第一个css 属性
$(this).css( ["width", "height", "color", "background-color"] )获取多个css属性
设置
.css('background','red') 设置集合所有css特定属性
.css({
'background-color' : 'yellow',
 'font-weight' : 'bolder'
})