站長資訊網
jquery改變width的方法：1、利用“元素對象.width(改變后的width值)”，該方法可設置被選元素的寬度；2、利用“元素對象.css("width","改變后的width值")”，css()方法可以設置指定css屬性的值。
本教程操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。
jquery怎么改變width
1、利用width()方法
width() 方法設置或返回被選元素的寬度。
當該方法用于返回寬度時， 則返回第一個匹配元素的寬度。
當該方法用于設置寬度時，則設置所有匹配元素的寬度
語法為：
返回寬度：
$(selector).width()
設置寬度：
$(selector).width(value)
使用函數設置寬度：
$(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>
輸出結果：
2、利用css()方法配合width屬性
css() 方法設置或返回被選元素的一個或多個樣式屬性。
如需設置指定的 CSS 屬性，請使用如下語法：
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>
輸出結果與上面示例相同：
相關視頻教程推薦：jQuery視頻教程
