javascript - 当窗口大小改变时，如何改变按钮的功能？

Question

所以我有两张图片，一张高于 1440 像素的宽分辨率，一张低于 1440 像素。 我有一个按钮来切换这张图片，不幸的是我不知道如何让它工作，所以它切换到 1440 像素以下的 lores 图像或 1440 像素以上的 hires 图像。另外，现在我的 toggle_off 函数无法与我尝试使用的 js 一起使用。

CSS:

.p_works
{
    width:100%;
}
@media (min-width: 1440px){
        #art1
        {
            display:inline;
        }
        #art1_lores
        {
            display:none;
        }
        #art2
        {
            display:none;
        }
        #art2_lores
        {   
            display:none;
        }
        }
@media (max-width: 1440px){
        #art1
        {
            display:none;
        }
        #art1_lores
        {
            display:inline;
        }
        #art2
        {
            display:none;
        }
        #art2_lores
        {   
            display:none;
        }
        }

我真的不懂 javascript，所以这是一次我确定是错误的尝试，而且我什至不知道是否需要为 mathcmedia 加载脚本。

Javascript:

<script type="text/javascript">
    function toggle_on(id) {
        var hires = document.getElementById(id);
        var lores = document.getElementById(id) +'_lores';
        if (window.matchmedia("(min-width: 1440px)").matches) {
            hires.style.display = 'inline';
        }
        else {
            lores.style.display = 'inline';
        }
    }
    function toggle_off(id) {
        var e = document.getElementById(id);
        if(e.style.display = 'inline') 
        e.style.display = 'none';
    }
</script>

HTML:

<a href="#" onclick="toggle_on('art1'); toggle_off('art2'); toggle_off('art2_lores')">
            <img class="icons" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/icons/typewriter.jpg" alt="typewriter"/>
</a>
<a href="#" onclick="toggle_on('art2'); toggle_off('art1'); toggle_off('art1_lores');">
            <img class="icons" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/icons/wasting-water.jpg" alt="wasting water"/>
</a>
<img class="p_works" id="art1" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/Typewriter.jpg" alt="typewriter"/>
<img class="p_works" id="art1_lores" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/lores/Typewriter.jpg" alt="typewriter"/>
<img class="p_works" id="art2" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/wasting-water.jpg" alt="wasting water"/>
<img class="p_works" id="art2_lores" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/wasting-water.jpg" alt="wasting water"/>

你可以看到我在这里: http://www.dillonbrannick.com/redesign

按钮在右边；图标，只有前两个应该按照我的代码工作，但它们不工作。

CodePen

Answer 1

也许这样:

window.onresize = function(event) {
      var w=window.outerWidth;
      var h=window.outerHeight;


      // Size specific code here
}