Question

我一直在寻找这个（并亲自尝试），但到目前为止还无法使它发挥作用。

我有以下内容：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等）

感谢您的关注！

Answer 1

您可以执行此操作以避免按ID

多次获取元素

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

Answer 2

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

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

Answer 3

您需要smalltag作为DOM元素的参考，因此您需要这样做：

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

Answer 4

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

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

Answer 5

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

Answer 6

在你说它工作的第一个中，document.getElementById（'id1'）。style.top正在重置。

但是在第二次尝试中你没有再次从smalltag设置document.getElementById（'id1'）。style.top

将长javascript元素代码转换为较小的代码

6 个答案: