無法通過Javascript更改元素位置

我知道PHP，VB.net，但我是JavaScript的初學者。我有一個動畫問題。第一個是工作，但第二個不...無法通過Javascript更改元素位置

var elem = document.getElementById("PrviObjekat"); (this one is working) 

var elem_drugi = document.getElementById("DrugiObjekat"); (this one not, it has no logic)...

但是我把它稱之爲不工作？

全功能HTML/JS代碼：

<!DOCTYPE HTML> 
<html> 

<head> 
<meta charset = "utf-8"> 
<link rel="stylesheet" type="text/css" href="stilizacija.css"/> 
<title>Animacija</title> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
</script> 
</head> 

<body> 
<div id = "Animacija"> 
<p id = "PrviObjekat"> Dobro došli, ovo je prvi probni tekst.</p> 
<p id = "DrugiObjekat">Ovo je drugi tekst...</p> 
</div> 
<br> 
<script> 
function Animiraj() 
{ 
var elem = document.getElementById("PrviObjekat"); 
var elem_drugi = document.getElementById("DrugiObjekat"); 
var pos = 0; 
var pos2 = 195; 
var id = setInterval(frame_dole, 12); 
function frame_dole() 
{ 
    if (pos == 150) 
    { 
     clearInterval(frame_dole); 
     id = setInterval(frame_gore, 12); 
    } else { 
     pos++; 
     elem.style.top = pos + 'px'; 
     elem.style.left = pos + 'px'; 
     elem_drugi.style.left = pos + 'px'; 
    } 
} 
function frame_gore() 
{ 
    if (pos == 0) 
    { 
     clearInterval(id); 
     id = setInterval(frame_dole, 12); 
    } else { 
     pos--; 
     elem.style.top = pos - 'px'; 
     elem.style.left = pos - 'px'; 
     elem_drugi.style.left = pos - 'px'; 
    } 
} 
}    
var PrviKliknut = false; 
$("#PrviObjekat").click(function() 
{ 
if(PrviKliknut == false) 
{ 
$("#PrviObjekat").css({"font-size" : "20px"}); 
PrviKliknut = true; 
}else{ 
$("#PrviObjekat").css({"font-size" : "16px"}); 
PrviKliknut = false; 
} 
});  
$(document).ready(function() 
{ 
console.log("Dokument je učitan."); 
Animiraj(); 
//$("#PrviObjekat").animate({ scrollTop: $("#TockaB").offset().top }, 1500);  
});  
</script> 
</body> 

</html>

CSS代碼：

#Animacija 
{ 
width: 550px; 
height: 550px; 
position: relative; 
background: yellow; 
} 
#PrviObjekat 
{ 
width: 145px; 
height: 75px; 
position: absolute; 
background: red; 
} 
#DrugiObjekat 
{ 
background: green; 
width: 100px; 
height: 60px; 
margin-left: 195px; 
margin-top: 25px; 
}

謝謝你，祝你有美好的一天。

來源

2017-06-13 Plovix

爲什麼要在使用JQuery時使用getElementbyId？ –

試試#DrugiObjekat位置：絕對 –

function Animiraj() 
 
{ 
 
var elem = document.getElementById("PrviObjekat"); 
 
var elem_drugi = document.getElementById("DrugiObjekat"); 
 
var pos = 0; 
 
var pos2 = 195; 
 
var id = setInterval(frame_dole, 12); 
 
function frame_dole() 
 
{ 
 
    if (pos == 150) 
 
    { 
 
     clearInterval(frame_dole); 
 
     id = setInterval(frame_gore, 12); 
 
    } else { 
 
     pos++; 
 
     elem.style.top = pos + 'px'; 
 
     elem.style.left = pos + 'px'; 
 
     elem_drugi.style.left = pos + 'px'; 
 
     
 
    } 
 
} 
 
function frame_gore() 
 
{ 
 
    if (pos == 0) 
 
    { 
 
     clearInterval(id); 
 
     id = setInterval(frame_dole, 12); 
 
    } else { 
 
     pos--; 
 
     elem.style.top = pos - 'px'; 
 
     elem.style.left = pos - 'px'; 
 
     elem_drugi.style.left = pos - 'px'; 
 
     
 

 
    } 
 
} 
 
}    
 
var PrviKliknut = false; 
 
$("#PrviObjekat").click(function() 
 
{ 
 
if(PrviKliknut == false) 
 
{ 
 
$("#PrviObjekat").css({"font-size" : "20px"}); 
 
PrviKliknut = true; 
 
}else{ 
 
$("#PrviObjekat").css({"font-size" : "16px"}); 
 
PrviKliknut = false; 
 
} 
 
});  
 
$(document).ready(function() 
 
{ 
 
console.log("Dokument je učitan."); 
 
Animiraj(); 
 
//$("#PrviObjekat").animate({ scrollTop: $("#TockaB").offset().top }, 1500);  
 
});

<style> 
 
{ 
 
width: 550px; 
 
height: 550px; 
 
position: relative; 
 
background: yellow; 
 
} 
 
#PrviObjekat 
 
{ 
 
width: 145px; 
 
height: 75px; 
 
position: absolute; 
 
background: red; 
 
} 
 
#DrugiObjekat 
 
{ 
 
background: green; 
 
width: 100px; 
 
height: 60px; 
 
margin-left: 195px; 
 
margin-top: 25px; 
 
position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
<div id = "Animacija"> 
 
<p id = "PrviObjekat"> Dobro došli, ovo je prvi probni tekst.</p> 
 
<p id = "DrugiObjekat">Ovo je drugi tekst...</p> 
 
</div> 
 
<br> 
 
</body>

#DrugiObjekat 
{ 
background: green; 
width: 100px; 
height: 60px; 
margin-left: 195px; 
margin-top: 25px; 
position: absolute; 
}

HTML元素定位在由默認靜態。靜態定位元素不受頂部，底部，左側和右側屬性的影響。

來源

2017-06-13 17:32:35

你打算解釋一下你的答案，還是讓我們玩一個不同尋常的遊戲？ – j08691

@ j08691我忘了。我的錯誤..看看 –

「靜態定位元素不受影響」...所以你需要做的是改變... X ...到... Y - 也許以某種方式標記您更改的行。讓我複製原始代碼和答案，以便我可以做一個比較，然後弄清楚爲什麼你的答案有效，使答案不是很有用。 –

無法通過Javascript更改元素位置

回答

相關問題