jquery css("width")与width()

Posted 2020-09-21 dy blog

css("width")返回的是字符串，..px

width()返回的是浮点数，可用于运算，所以要将控件居中时需要用width()而不能用css("width")

 1 function setCenter(tag){
 2     tag.css({"margin-left":parseFloat(tag.parent().width()/2-tag.width()/2)});
 3     tag.css({"margin-top":parseFloat(tag.parent().height()/2-tag.height()/2)});
 4 }
 5 function showBigImage(obj)
 6 {
 7     var bodyModal= $(".body-container>.body-modal");
 8     bodyModal.show();
 9     var bigImage=bodyModal.children(".big-image")
10     ,    maxWidth=bodyModal.width()
11     ,    maxHeight=bodyModal.height();
12     console.log(maxWidth,maxHeight);
13     console.log(bigImage.css("width"),bigImage.css("height"));
14     bigImage.css({"width":"auto","height":"auto"}).attr("src",obj.src);
15     console.log(bigImage.css("width"),bigImage.css("height"));
16     var width=bigImage.width()
17     ,    height=bigImage.height();
18     if(width>maxWidth) {
19         bigImage.css({"width":maxWidth,"height":"auto"});
20         console.log("width",bigImage.css("width"),bigImage.css("height"));
21     } else if(height>maxHeight) {
22         bigImage.css({"height":maxHeight,"width":"auto"});
23         console.log("height",bigImage.css("width"),bigImage.css("height"));
24     }
25     bigImage.show();
26     setCenter(bigImage);
27 }

将一张图片居中，如果过长或过宽，则按超过的一边原比例铺满