将此函数从Javascript转换为jQuery

我反复尝试将此函数更改为jQuery，但似乎无法使其正常运行。有人能帮我一下吗

window.onresize = resizeImage;

function resizeImage(){
    var newHeight = document.documentElement.clientHeight;
    var newWidth = document.documentElement.clientWidth;
    document.getElementById('crofthouse').width = (newHeight / 2) * 1.33;
    document.getElementById('crofthouse').height = (newHeight / 2);
    document.getElementById('main').style.width = (newHeight / 2) * 1.33;
    document.getElementById('main').style.height = (newHeight / 2);

    var margin = (newHeight - document.getElementById('crofthouse').height) / 2;
    document.getElementById('main').style.margin = margin + ',auto,' + margin + ',auto';
}

下面是我试图转换它的尝试 window.onresize=调整图像大小

function resizeImage(){
var newHeight = document.documentElement.clientHeight;
var newWidth = document.documentElement.clientWidth;

$("#crofthouse").css("width, (newHeight /2) * 1.33")
$("#crofthouse").css("hegiht, (newHeight /2)")
$("#main").css("width, (newHeight /2) * 1.33")
$("#main").css("height, (newHeight /2)")


var margin = (newHeight - $('#crofthouse').css("height) / 2");
$('main').css("margin = margin + ',auto,' + margin + ',auto'");

}

---

应该有用，试试看

$(window).resize(function(){
    var docEl = document.documentElement;
    var newHeight = docEl.clientHeight;
    var newWidth = docEl.clientWidth;
    $('#crofthouse').width((newHeight / 2) * 1.33);
    $('#crofthouse').height((newHeight / 2));
    $('#main').css({
        width: (newHeight / 2) * 1.33,
        height: newHeight / 2 
    );

    var margin = newHeight - (($('#crofthouse').height()) / 2);
    $('#main').css('margin', margin + ', auto, ' + margin + ', auto');
};

---

应该有用，试试看

$(window).resize(function(){
    var docEl = document.documentElement;
    var newHeight = docEl.clientHeight;
    var newWidth = docEl.clientWidth;
    $('#crofthouse').width((newHeight / 2) * 1.33);
    $('#crofthouse').height((newHeight / 2));
    $('#main').css({
        width: (newHeight / 2) * 1.33,
        height: newHeight / 2 
    );

    var margin = newHeight - (($('#crofthouse').height()) / 2);
    $('#main').css('margin', margin + ', auto, ' + margin + ', auto');
};

这应该可以

$(window).resize(function(){
    var doc = $(document),
        croft = $('#crofthouse'),
        main = $('#main'),
        height = doc.height(),
        margin = croft.height() / 2;


    croft.add(main).css({
             width:(height / 2) * 1.33, 
             height:(height / 2)
    });
    main.css({ margin: margin + 'px auto' });
});

这应该可以

$(window).resize(function(){
    var doc = $(document),
        croft = $('#crofthouse'),
        main = $('#main'),
        height = doc.height(),
        margin = croft.height() / 2;


    croft.add(main).css({
             width:(height / 2) * 1.33, 
             height:(height / 2)
    });
    main.css({ margin: margin + 'px auto' });
});

或者如果你真的想要jquery方法

$(window).resize(resizeImage);
    function resizeImage(){
        var newHeight = document.documentElement.clientHeight;
        var newWidth = document.documentElement.clientWidth;
        var croftHouse = document.getElementById('crofthouse');
        croftHouse.height = (newHeight / 2) * 1.33;
        croftHouse.width = (newWidth / 2);
        var main = document.getElementById('main');
        main.style.width = (newHeight / 2) * 1.33;
        main.style.height = (newHeight / 2);

        var margin = (newHeight - croftHouse.height) / 2;
        main.style.margin = margin + ',auto,' + margin + ',auto';
    }

作为记录，我不确定croftHouse.height的作用。。你是说克罗夫特豪斯风格高度吗

或者如果你真的想要jquery方法

$(window).resize(resizeImage);
    function resizeImage(){
        var newHeight = document.documentElement.clientHeight;
        var newWidth = document.documentElement.clientWidth;
        var croftHouse = document.getElementById('crofthouse');
        croftHouse.height = (newHeight / 2) * 1.33;
        croftHouse.width = (newWidth / 2);
        var main = document.getElementById('main');
        main.style.width = (newHeight / 2) * 1.33;
        main.style.height = (newHeight / 2);

        var margin = (newHeight - croftHouse.height) / 2;
        main.style.margin = margin + ',auto,' + margin + ',auto';
    }

---

作为记录，我不确定croftHouse.height的作用。。你是说

croftHouse.style.height

？

document.getElementById（“sth”）可以被$（“#sth”）替换，这是第一次更改。你说它不能正常运行是什么意思？你最好的尝试是什么样的（在你的问题中发帖）？CSS不能“理解”JavaScript

document.getElementById（'crofthouse'）。宽度=…

应转到

$（“#crofthouse”）.css（“宽度”，（newHeight/2）*1.33）

。注意报价的位置。此外，考虑使用MulLISCSS选择器或链接或使用变量来避免每次重新创建jQuery（重新调用选择器）。代码>var house=$（#“crofthouse”）。。。css（…）。这也将有助于减少错误，如

$（“main”）

您确实意识到，生成的jQuery方法将比直接的js方法运行得慢。jQuery是一个封装在javascript之上的库，这意味着一个编写良好的函数在发挥jQuery的魔力之前，可以做与神秘森林中jQuery相同的事情，但不需要所有的开销。您想要的是通过一些更新来保留原始函数。我将post.document.getElementById（“sth”）可以替换为$（“#sth”），这是第一次更改。你说它不能正常运行是什么意思？你最好的尝试是什么样的（在你的问题中发帖）？CSS不能“理解”JavaScript

document.getElementById（'crofthouse'）。宽度=…

应转到

$（“#crofthouse”）.css（“宽度”，（newHeight/2）*1.33）

。注意报价的位置。此外，考虑使用MulLISCSS选择器或链接或使用变量来避免每次重新创建jQuery（重新调用选择器）。代码>var house=$（#“crofthouse”）。。。css（…）。这也将有助于减少错误，如

$（“main”）

您确实意识到，生成的jQuery方法将比直接的js方法运行得慢。jQuery是一个封装在javascript之上的库，这意味着一个编写良好的函数在发挥jQuery的魔力之前，可以做与神秘森林中jQuery相同的事情，但不需要所有的开销。您想要的是通过一些更新来保留原始函数。我会发帖的。我想知道你为什么要将工作JavaScript转换成jQuery。它将始终比本机速度慢。是的，但可能无法跨浏览器工作。将jQuery用于像这样简单的事情的最大优势之一是，您有一个JS专家团队，可以使所有内容在不同浏览器之间无缝工作。如果本地JS函数存在的话，大多数jQuery函数都会尽可能快地委托给它们。它将始终比本机速度慢。是的，但可能无法跨浏览器工作。将jQuery用于像这样简单的事情的最大优势之一是，您有一个JS专家团队，可以使所有内容在不同浏览器之间无缝工作。大多数jQuery函数都会尽可能快地委托给本地JS函数（如果有的话）。。我是否需要更改我的窗口。onresize=resizeImage@用户，此代码应替换您在问题中发布的全部代码。。函数和事件绑定。。（这一切都可以）我试过了，但都不管用。。我是否需要更改我的窗口。onresize=resizeImage@用户，此代码应替换您在问题中发布的全部代码。。函数和事件绑定。。（这就是全部）