站長(zhǎng)資訊網(wǎng)
jquery改變width的方法：1、利用“元素對(duì)象.width(改變后的width值)”，該方法可設(shè)置被選元素的寬度；2、利用“元素對(duì)象.css("width","改變后的width值")”，css()方法可以設(shè)置指定css屬性的值。
本教程操作環(huán)境：windows10系統(tǒng)、jquery3.2.1版本、Dell G3電腦。
jquery怎么改變width
1、利用width()方法
width() 方法設(shè)置或返回被選元素的寬度。
當(dāng)該方法用于返回寬度時(shí)， 則返回第一個(gè)匹配元素的寬度。
當(dāng)該方法用于設(shè)置寬度時(shí)，則設(shè)置所有匹配元素的寬度
語(yǔ)法為：
返回寬度：
$(selector).width()
設(shè)置寬度：
$(selector).width(value)
使用函數(shù)設(shè)置寬度：
$(selector).width(function(index,currentwidth))
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").width("100px"); }); }); </script> </head> <body> <div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br> <button>改變div的寬度</button> </body> </html>
輸出結(jié)果：
2、利用css()方法配合width屬性
css() 方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性。
如需設(shè)置指定的 CSS 屬性，請(qǐng)使用如下語(yǔ)法：
css("propertyname","value");
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").css("width","100px"); }); }); </script> </head> <body> <div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br> <button>顯示div的寬度</button> </body> </html>
輸出結(jié)果與上面示例相同：
相關(guān)視頻教程推薦：jQuery視頻教程
