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

这是uploadedImage /

的css

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

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

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

谢谢

Answer 1

您正在将javascript与jquery混合，

将是

document.getElementById('uploadedPhoto').clientHeight;

而不是

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

我认为clientHeight阅读here＆amp; here

您可以使用简单的jquery

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

Answer 2

document.getElementById('#uploadedPhoto')错了

试

document.getElementById('uploadedPhoto')

您不应在传递给#

的ID中加入document.getElementById

除此之外，id本身在$函数和getElementById函数中有所不同。似乎有一个拼写错误没有反映在getElementById，这就是if遇到麻烦的原因。

我为你的评论做了fiddle。

Answer 3

尝试类似

的内容

$('#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 4

对我来说很好看。没有测试过，但它不能只是一个错字？当您通过Id获取元素时，您编写了#uploadedPhoto，但随后在if{}语句中编写了#upoladedPhoto。看到不同？你试图将一些CSS应用到一个非现有的div ;-)

<div>高度在if语句</div>中没有变化

4 个答案: