条件满足时不会触发事件

Question

我已经编写了一个脚本，当窗口被挤压到某个水平长度时，将float的值从right切换为left。

function switchMedia(){ 
    if(w < 1050){ 
     document.getElementById("secondPic").style.cssFloat = "left"; 
    document.getElementById("secondPic").style.marginLeft = "1.5vh"; 
    } 
    if(w > 1050){ 
     document.getElementById("secondPic").style.cssFloat = "right"; 
    } 
    } 
} 

而且这里的听众：

initialize(); 

function initialize(){ 
    addEventListener("resize",switchMedia,false); 
    switchMedia(); 

} 

奇怪的是，它的工作对我摆在w第一的价值观，但一旦我切换到1050，浮点值不会改变。

Answer 1

你的条件语句只有当w小于或大于1050 1050既不低于也不超过1050试着改变第二有条件if(w > 1049)

Answer 2

您需要更新w变量

返回true

http://jsbin.com/fivove/1/

function switchMedia(){ 
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
    if(w < 1050){ 
    document.getElementById("secondPic").style.float = "left"; 
    document.getElementById("secondPic").style.marginLeft = "1.5vh"; 
    } 
    if(w >= 1050){ 
    document.getElementById("secondPic").style.float = "right"; 
    } 
} 


function initialize(){ 
    window.addEventListener("resize",switchMedia,false); 
    switchMedia(); 

} 

initialize(); 

https://stackoverflow.com/a/28241682/383904

---

另外，不要两次的元素大小调整搜索到DOM特别不：

http://jsbin.com/fivove/2/

var secPic = document.getElementById("secondPic"); // Cache your element! 
// It's too expensive to lookup th whole DOM for a single element on resize 

function switchMedia(){ 
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
    var isSmall = w < 1050; 
    secPic.style.float  = isSmall ? "left" : "right"; 
    secPic.style.marginLeft = isSmall ? "0" : "1.5vh"; 

} 

function initialize(){ 
    window.addEventListener("resize",switchMedia,false); 
    switchMedia(); 
} 

initialize();