Javascript <；部门>；if语句中的高度不改变

我在我的HTML中有一个图像，我试图改变它的尺寸，这取决于它是纵向的还是横向的，这样就不会造成太大的失真。我有三个按钮'小'，'中'，'大'，每个按钮改变高度和宽度

这是我已经写过的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%');
        } 
});

当没有if语句时，3个按钮可以工作，但在这种情况下，我只更改css属性，而不考虑它是处于potrait模式还是横向模式

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

---

谢谢

您将

javascript

与

jquery

混合使用

那将是

document.getElementById('uploadedPhoto').clientHeight;

而不是

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

我认为在

clientHeight

read&

您可以使用简单的jquery

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

---

document.getElementById（'uploadedPhoto'）

错误

试一试

您不应该在传递给

文档的id中包含
。getElementById

除此之外，

id

本身在

$

函数和

getElementById

函数中是不同的。似乎有一个打字错误没有反映在

getElementById

中，这就是

if

出现问题的原因

我为你的评论做了一个准备。

试试类似的东西

$('#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%');
        } 
});
});

$（“#大”）。单击（函数（）{
$（“img#upoladedPhoto”）.load（函数（）
{
var-width=这个.width；
var高度=此高度；
如果（高度>宽度）{
$（'upoladedPhoto'）.css（'height'，'95%）；
$（'upoladedPhoto'）.css（'width'，'85%）；
}
否则如果（高度<宽度）{
$（'upoladedPhoto'）.css（'height'，'85%）；
$（'upoladedPhoto'）.css（'width'，'95%）；
}
否则{
$（'upoladedPhoto'）.css（'height'，'95%）；
$（'upoladedPhoto'）.css（'width'，'95%）；
} 
});
});
在我看来很好。还没有测试过，但这难道不是一个打字错误吗？当您通过Id获取元素时，您编写了
#uploadedPhoto
，但随后在
if{}
语句中编写了
#upoladedPhoto
。看到区别了吗？您试图将一些CSS应用于不存在的div；-）
 在
文档中包含
#
似乎有误（或误解）。getElementById（…）
@Harry即使没有#，它也不起作用。可能是因为我还没有在CSS中定义高度和宽度？有可能制作一个演示版吗？添加一个提琴来更好地理解这个问题。哈哈，我一直在输入一个拼写错误，而不是上传。谢谢，但还是不行。我取下了#。其他两个没有if语句的按钮工作正常，但导致失真。仍然不工作。我取下了#。其他两个没有if语句的按钮工作正常，但会导致失真
document.getElementById('uploadedPhoto')

$('#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%');
        } 
});
});