这个秘密武器让你轻松掌控元素大小

哈喽, 大家好啊!今天来讲讲jquery这东西，用它做网页和webapp可方便了，轻轻一点就能实现。就算是处理复杂的JavaScript操作也难不住它。直接来学习下怎样用jquery控制元素的宽度高度！

听过动态调大小没？这可算是日常工作里常有的事儿，看似简单实则挺费劲儿。别担心，咱们这儿有妙招帮您解决这个烦恼！

这你可知道吗？jQuery里还有俩好使的函数 —— width() 跟 height(),平时就像小超人一样，能随便改变元素大小。举个例子，你想让某个元素的宽度定在50像素，高度设为100像素，这也太简单了！

直接设定元素的宽高，比例就是 50:100。

$("#myelement").width(50);
$("#myelement").height(100);

想要知道元素的宽高？直接调用函数不用传参，比如：

别犯愁，快来试试这个法宝！不用敲代码输入任何数据，轻松学会掌控元素的宽度和高度！比如说，这句：

console.log($("#myelement").width());
console.log($("#myelement").height());

用 console 来看看你的元素宽和高是多少。

搞定宽高，这多容易！别急，接下来还有好多小窍门！

是不是有时候你发现某个元素变大了，然后另一个元素也要跟着它变大？觉得挺麻烦？别担心，我这有你想知道的小技巧。

告诉你jQuery里头有个超神奇的函数叫做css()，可以用来调整CSS属性，比如说宽高什么的。如果你想调整元素大小，记得用这个css()函数咯~例如，假如你想让元素宽占屏幕50%，高充满整个页面，这样写就对了:

好了知道了，”宽度”咱们设成”50%”，那”高度”就给它”100%”！

$("#myelement").css("width", "50%");
$("#myelement").css("height", "100%");

别忘了，CS不光是靠像素来设定大小滴，你也可以用百分比这样无论爸爸元素咋变，咱孩子元素都是稳稳哒~但前提得先搞明白爸爸元素有多大哈~像跟窗户啥的关系密切的话，就得费点心思算算，再给孩子元素设定合适的大小。这时候，jQuery的一些小技巧就能帮到大忙了哟~

窗口变大方块儿了，容易让元素也跟着大。这事儿可不能轻视！不过别慌，哥教你轻松搞定它！

说到Javascript里好用的小帮手，不得不说一下那个叫$jQuery的resize（）函数！它可厉害，能让你在网页大小变化的时候，一点也不怕元素会跑偏！只需要把整个浏览器窗户拉来扯去，然后使用这个函数就行。比如说，你要是想要让某个元素随浏览器窗扩大成两倍大，那就这么干吧：

$(window).resize(function(){

浏览器里头那个叫’style’上天了，把那啥’#targetElement’给整成屏宽一半高一半~

$(window).resize(function() {
    var width = $(this).width();
    var height = $(this).height();
    $("#myelement").css("width", width * 0.5 + "px");
    $("#myelement").css("height", height * 0.5 + "px");
});

大家看好了，定义的像素大小尺寸是固定哒！不过，你要是更习惯用比例设置的话，那就直接当作CSS属性设定吧

哥们儿，跟你说说怎么快速搞定元素的宽高问题？你以为就那么一招？大错特错，其实这玩意儿有好多种花样！首先，width()和height()这俩兄弟可是调整到指定数字的神器；再者，css()+数字或者百分数，就是随意你摆布元素大小的玩法。说到最厉害的，那得数resize()了！它不光能依据窗户尺寸调节元素，还能跟着窗子一块长！动态排版啊响应式网页，有了它都轻松应对。最后，你得结合自己的需求仔细挑。所以，学点儿这些小技俩，对做网站的哥儿们来说可是大有裨益！快去试一试！

好，我们今天就先这样咯！希望你们学到东西，觉得我讲得还行的话给个好评。有什么问题或建议，欢迎留言给我快来帮我点个赞，发出去让更多朋友知道这个！谢谢各位看完，下次再聊