样式操作
一、 概要
通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了
二、CSS()
1、作用
css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值
如果需要删除指定的css属性，使用函数将其值设为空字符串("")
2、语法格式
-
格式一
$("selector").css(property [, value ]) 1>如果指定了value参数，则表示设置css属性的值为value； 2> 如果没有指定value参数，则表示返回css属性的值 -
格式二
$("selector").css( object ) 1、以对象形式同时设置任意多个属性的值。对象object的每个属性对应property，属性的值对应value 2、如果省略了value参数，则表示获取属性值；如果指定了该参数，则表示设置属性值。 3、css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素；所有"读取"操作只针对第一个匹配的元素。
3、参数
| 参数 | 描述 |
|---|---|
| propertyName | String/Array类型指定的css属性名称(用于设置或返回)，或者css属性名称数组(仅用于返回)。 |
| value | 可选/String/Number/Function类型指定的属性值，或返回属性值的函数。 |
| object | Object类型指定的对象，用于封装多个键值对，同时设置多项属性。 |
4、参数说明
- jQuery 1.4 ：参数value可以是函数，css()将根据匹配的所有元素遍历执行该函数，函数中的this指针将指向对应的DOM元素。css()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素css属性propertyName当前的值。函数的返回值就是为该元素的css属性propertyName设置的值。
- jQuery 1.9 ：如果是"获取"操作(仅限"获取"操作)，参数propertyName还可以是多个css属性名称组成的数组，css()将以对象形式返回多个css属性(对象的属性名称对应css属性名称，属性值对应css属性值)
5、返回值
- css()函数的返回值是任意类型，返回值的类型取决于当前css()函数执行的是"设置"操作还是"读取"操作。
- 如果css()函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作，则返回读取到的属性值。
- 如果当前jQuery对象匹配多个元素，返回属性值时，css()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。
6、示例
-
HTML代码
<h3>设置css属性</h3> <p id="p1">设置单个属性属性</p> <p id="p2">设置多个属性</p> <h3>获取css属性</h3> <p style="color: red ;margin: 30px ;background-color: aqua" id="p3">获取css属性</p> <h3>清除css属性</h3> <p id="p4" style="font-size: 16px" >清除属性</p>
-
JQ代码
$(function () { var $p1 = $("#p1"); var $p2 = $("#p2"); var $p3 = $("#p3"); $p1.css("color", "red") .text("设置单个属性"); $p2.css({ "font-size": "20px", "color": "red", "margin": "10px", "padding": "10px", "background": "greenyellow" }) .text("设置多个属性"); /** * 获取属性 * @type {*|jQuery} */ $p1.css("color");//rgb(255, 0, 0) $p2.css("background");//rgb(173, 255, 47) $p3.css("margin");//30px /** * 清除样式 */ $("p4").css("font-size", ""); });
7、注意事项
1、如果参数value为空字符串("")，则表示删除该css属性。
2、对于多个单词构成的css属性，你可以使用其css格式("-")或者DOM格式(驼峰式)，jQuery都能理解。例如background-color，你可以将propertyName设为background-color或backgroundColor。建议优先以驼峰式来获取(jQuery底层也是通过DOM来获取的，DOM元素的属性均以驼峰式命名)。
3、有些时候获取到的css属性值与你在样式表中设置的值并不完全相同。例如：某些表示尺寸的属性值，你可能在样式表中设置的单位是em、px、ex或者%，但jQuery获取的是经过浏览器计算后css属性值，其单位多数情况下为像素。此外，不同浏览器对于颜色(color)属性值的文本表示也不一致，以white为例，浏览器可能返回white、#FFF、#ffffff、rgb(255,255,255)等，当然它们在逻辑上都表示白色。
4、对于一些速写的css属性，例如margin、padding、background、border。尽管某些浏览器提供了此功能，但它的结果是无法保证的，有些浏览器也并不支持。以margin为例，你可能需要通过css("marginTop")、css("marginRight")等方式来分别获取。
三、height()
1、作用
用于设置或返回当前匹配元素的高度
2、语法格式
-
格式
$("selector").height( [ value ] ) 1、如果省略了value参数，则表示获取高度；如果指定了该参数，则表示设置高度。 2、height()函数的"设置"操作针对的是当前jQuery对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。
3、参数
| 参数 | 描述 |
|---|---|
| value | 可选/Number类型用于设置的高度值。 |
4、参数说明
- 参数value可以为函数，则height()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。
- 函数可以两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的高度值。函数的返回值就是需要设置的高度值。
5、返回值
- height()函数的返回值为jQuery/Number类型，返回值的类型取决于height()函数当前执行的是"设置"操作还是"读取"操作
- 如果height()函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作，则返回第一个匹配元素的高度值
6、示例
-
HTML代码
<div id="div1"></div> <div id="div2"></div> <a href="#">aaaa</a> -
jq代码
var $d1 = $("#div1"); var $d2 = $("#div2"); $d1.height(); // 0 $d1.height(); // 100 var $divs = $("div"); // 如果匹配多个元素，只返回第一个元素的height $divs.height(); // 0 $d1.height(100); // 设置所有div元素的height不能小于100px(小于100的设为500，其它不变) $divs.height( function(index, height){ return Math.max(height, 500); } );
四、width()
1、作用
用于设置或返回当前匹配元素的宽度
2、语法格式
-
格式一
$("selector").width( [ value ] )
3、参数
| 参数 | 描述 |
|---|---|
| value | 可选/Number类型用于设置的宽度值。 |
4、参数说明
- 参数value可以为函数，则width()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。
- 如果参数是函数可以传入两个参数:第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的宽度值。函数的返回值就是需要设置的宽度值。
5、返回值
- width()函数的返回值为jQuery/Number类型，返回值的类型取决于width()函数当前执行的是"设置"操作还是"读取"操作。
- 如果width()函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作，则返回第一个匹配元素的宽度值。
6、示例
-
HTML代码
<div id="d1" style="padding: 10px; width: 150px; height:150px;"></div> <div id="d2" style="width: 200px; height:100px;"></div> -
jq代码
var $d1 = $("#d1"); var $d2 = $("#d2"); $d1.width(); // 100 $d2.width(); // 200 var $divs = $("div"); // 如果匹配多个元素，只返回第一个元素的width $divs.width(); // 100 // 设置所有div元素的width不能小于300px(小于300的设为300，其它保持不变) $divs.width( function(index, width){ return Math.max(width, 300); } ); // 设置n1的width为20px $d1.width( 20 );
五、innerHeight(),innerWidth()
1、作用
置或返回当前匹配元素的内宽度或者高度
2、语法格式
-
格式一
$("selector").innerHeight( [ value ] ) $("selector").innerWidth( [ value ] )
3、参数
| 参数 | 描述 |
|---|---|
| value | 可选/Number类型用于设置的内高度值(宽度)。 |
4、参数说明
- 参数value可以为函数，则width()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。
- 如果参数是函数可以传入两个参数:第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的宽度值。函数的返回值就是需要设置的宽度值。
5、返回值
- width()函数的返回值为jQuery/Number类型，返回值的类型取决于width()函数当前执行的是"设置"操作还是"读取"操作。
- 如果width()函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作，则返回第一个匹配元素的宽度值。
6、示例
-
HTML代码
<div id="d1" style="padding: 10px; height: 100px; border: 1px solid #000;"></div> <div id="d2" style="height: 150px; background: #999;"></div> -
jq代码
var $d1 = $("#d1"); var $d2 = $("#d2"); $d1.innerHeight(); // 120 $d2.innerHeight(); // 150 var $divs = $("div"); // 如果匹配多个元素，只返回第一个元素的innerHeight $divs.innerHeight(); // 120 <h1>1.8.0及之后版本</h1> // 设置所有div元素的innerHeight不能小于200px(小于200的设为200，其它保持不变) $divs.innerHeight( function(index, innerHeight){ return Math.max(innerHeight, 200); } ); // 设置n1的innerHeight为20px $n1.innerHeight( 20 );
六、outerHeight(),outerWidht()
1、作用
获取当前匹配元素的外高度(外宽度)
2、语法格式
-
格式一
$("selector").outerHeight( [ includeMargin ] ) $("selector").outerWidth( [ includeMargin ] )
3、参数
| 参数 | 描述 |
|---|---|
| includeMargin | 可选/Boolean类型指示是否包含外边距部分的高度(宽度)，默认为false
|
4、返回值
- outerHeight()函数的返回值为Number类型，返回第一个匹配元素的外高度。
- 如果当前jQuery对象匹配多个元素，返回外高度时，outerHeight()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回null
6、示例
-
HTML代码
<div id="d1" style="margin:5px; padding: 10px; height: 100px; border: 1px solid #000;"></div> <div id="d2" style="height: 150px; background: #999;"></div> -
jq代码
var $d1 = $("#d1"); var $d2 = $("#d2"); // outerHeight() = height(100) + padding(10*2) + border(1*2) = 122 $d1.outerHeight(); // 122 $d2.outerHeight() ); // 150 var $divs = $("div"); // 如果匹配多个元素，只返回第一个元素的outerHeight document.writeln( $divs.outerHeight() ); // 122 //outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 $n1.outerHeight(true); // 132 $n2.outerHeight(true); // 150
网友评论