<div> if 语句中的高度不变

Question

我有一个图像在我的HTML和我试图改变它的尺寸取决于这一事实，如果它是肖像或风景，使它不会造成太多的扭曲。我有3个按钮'小'，'中'，'大'，每个按钮改变高度和宽度。

这是我已经写好的if语句，但是当点击按钮时什么也没有发生

$('#large').click(function() {
var height = document.getElementById('#uploadedPhoto').clientHeight;
var width = document.getElementById('#uploadedPhoto').clientWidth;
    if (height > width) {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '85%');    
    }
    else if (height < width) {
        $('#upoladedPhoto').css('height', '85%');
        $('#upoladedPhoto').css('width', '95%');
    }
    else {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '95%');
        } 
});

这是uploadeimage/

的css

#upoladedPhoto {
display:none;
position:relative;
cursor:move;
max-height:100%;
max-width:100%;
left: 5em;
opacity:0.75;
}

这3个按钮在没有if语句的情况下工作，但在这种情况下，我只改变css属性，而不考虑它是在纵向模式还是横向模式

如果有更好的方法，请分享。

谢谢

Answer 1

您正在混合javascript和jquery，

就是

document.getElementById('uploadedPhoto').clientHeight;

代替

document.getElementById('#uploadedPhoto').clientHeight;

我认为有一些关于clientHeight的问题阅读这里&这里。

你可以使用简单的jquery

$('#uploadedPhoto').height();

Answer 2

试试

$('#large').click(function() {
$("img#upoladedPhoto").load(function() 
{
        var width = this.width;
        var height = this.height;
    if (height > width) {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '85%');    
    }
    else if (height < width) {
        $('#upoladedPhoto').css('height', '85%');
        $('#upoladedPhoto').css('width', '95%');
    }
    else {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '95%');
        } 
});
});

Answer 3

document.getElementById('#uploadedPhoto')错误

试

document.getElementById('uploadedPhoto')

传递给document.getElementById的id中不应该包含#

除此之外，id本身在$函数和getElementById函数上是不同的。似乎有一个错别字没有反映在getElementById中，这就是if出现问题的原因。

我为你的复习做了一个小提琴

Answer 4

看起来不错。还没测试过，会不会只是打错了?当您通过Id获取元素时，您写了#uploadedPhoto，但随后，在if{}语句中，您写了#upoladedPhoto。看到区别了吗?你试图应用一些CSS到一个不存在的div;-)