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

Question

所以我有两个图像，一个高于1440px宽分辨率，一个用于低分辨率。 我有一个按钮来切换这个图像，不幸的是我无法想象如何让它工作，所以它切换到1440px以下的lores图像或1440px以上的雇佣图像。 此外，现在我的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
}

Answer 2

function toggle_on_hires(id) {
        var e = document.getElementById(id);
        var w = window.innerWidth;
        if(w > 1440){
            e.style.display = 'inline';
        }
        else{
            e.style.display = 'none';
        }
    }
    function toggle_on_lores(id) {
        var e = document.getElementById(id);
        var w = window.innerWidth;
        if(w <= 1440){
            e.style.display = 'inline';
        }
        else{
            e.style.display = 'none';
        }
    }

然后，我使用toggle_on_hires调用＃art1，使用toggle_on_lores调用＃art1_lores。 所以现在它在窗口分辨率低于1440px宽时切换低分辨率图像，在高于1440px宽度时切换高分辨率图像。