无法通过Javascript更改元素位置_Javascript_Html_Css

无法通过Javascript更改元素位置

javascript html css

无法通过Javascript更改元素位置,javascript,html,css,Javascript,Html,Css,我知道PHP，VB.net，但我是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代码： &l

我知道PHP，VB.net，但我是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>

谢谢，祝你今天愉快。

函数Animiraj（）
{
var elem=document.getElementById（“PrviObjekat”）；
var elem_drugi=document.getElementById（“DrugiObjekat”）；
var-pos=0；
var pos2=195；
var id=设定间隔（第12帧）；
功能框架_dole（）
{
如果（位置=150）
{
净空间隔（帧长）；
id=设置间隔（第12帧）；
}否则{
pos++；
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
elem_drugi.style.left=pos+'px'；
}
}
函数框架_gore（）
{
如果（位置==0）
{
清除间隔（id）；
id=设定间隔（帧长度，12）；
}否则{
pos--；
elem.style.top=pos-‘px’；
elem.style.left=位置-‘px’；
elem_drugi.style.left=pos-‘px’；
}
}   
}               
var PRVIKLINUT=假；
$（“#PrviObjekat”）。单击（函数（）
{
如果（PRVIKLINUT==false）
{
$（“#PrviObjekat”）.css（{“字体大小”：“20px”}）；
PRVIKLINUT=真；
}否则{
$（“#PrviObjekat”）.css（{“字体大小”：“16px”}）；
PRVIKLINUT=假；
}
});     
$（文档）.ready（函数（）
{
console.log（“Dokument je učitan.”）；
Animiraj（）；
//$（“#PrviObjekat”）.animate（{scrollTop:$（“#TockaB”）.offset（）.top}，1500）；
});     

{
宽度：550px；
高度：550px；
位置：相对位置；
背景：黄色；
}
#普维奥比卡特
{
宽度：145px；
高度：75px；
位置：绝对位置；
背景：红色；
}
#药剂师
{
背景：绿色；
宽度：100px；
高度：60px；
左边距：195px；
边缘顶部：25px；
位置：绝对位置；
}

多布罗·多什利（Dobro došli），我有一个问题
Ovo je drugi techst


在使用JQuery时，为什么要使用getElementbyId？试试make#DrugiObjekat position:absolute你是要解释你的答案还是让我们玩一个发现差异的游戏？@j08691我忘了。我的错误..看看“静态定位元素不受影响”。。。所以你需要做的是改变。。。X。。。到也许你可以用某种方式标记你改变的线条。让我复制原始代码和你的答案，这样我就可以做一个比较，然后自己弄明白为什么你的答案有效，这使得答案不是很有用。
#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;
}