0

我一直在寻找这个（并自己尝试），但到目前为止还没有成功。

我有以下 onClick 它触发切换功能：

function toogle(){
    document.getElementById('id1').style.top = (document.getElementById('id1').style.top != '-130px' ? '-130px' : '0px')}

它可以按我的意愿工作，但我也想让它有点短，我尝试过

var smalltag = document.getElementById('id1').style.top;
smalltag  = (smalltag  != '-130px' ? '-130px' : '0px')

or

var smalltag = "document.getElementById('id1').style.top";
smalltag  = (smalltag  != '-130px' ? '-130px' : '0px')

但没有一个工作，我怎样才能让它工作？还想要一个简短的解释，以便我可以更好地理解它（如果可能的话）。

忘了说，我不打算使用任何 javascript 包，我正在尽我所能学习 javascript，使用这样的包将是一个不好的方法（意味着没有 jquery、mootools 等）。

感谢您的关注！

4

6 回答 6

2

您可以这样做以避免通过其 id 多次获取元素

var element = document.getElementById('id1');
element.style.top = (element.style.top != '-130px') ? '-130px' : '0px';
于 2012-12-14T13:34:19.247 回答
2

您只是分配给变量，给它一个与您实际要更改smalltag的对象无关的新值。StyleDeclaration在 JavaScript 中（幸运的是？）没有指针，所以你总是需要分配一个属性：

var elstyle = document.getElementById('id1').style;
elstyle.top = elstyle.top != '-130px' ? '-130px' : '0px';
于 2012-12-14T13:36:39.760 回答
1

您需要smalltag作为对 DOM 元素的引用，因此您需要这样做：

var smalltag = document.getElementById('id1');
smalltag.style.top  = (smalltag.style.top  != '-130px' ? '-130px' : '0px')
于 2012-12-14T13:34:18.930 回答
1

您必须将实际元素存储在变量中，以便稍后更改其属性。您试图存储字符串而不是修改它，但它不会对实际元素产生影响。

var el = document.getElementById('id1');
el.style.top = (el.style.top != '-130px' ? '-130px' : '0px')
于 2012-12-14T13:34:20.870 回答
1 
var smalltag = document.getElementById('id1').style.top;
var small  = (smalltag  != '-130px' ? '-130px' : '0px');
于 2012-12-14T13:34:36.157 回答
1

在您说它有效的第一个中， document.getElementById('id1').style.top 正在重置。

但是在第二次尝试中，您没有再次从 smalltag 设置 document.getElementById('id1').style.top

于 2012-12-14T13:35:40.417 回答