将jQuery转换为纯JavaScript

Question

我在尝试将这段代码从jQuery转换为纯JavaScript遇到问题。

我已经在JSFiddle中将所有内容记下来作为示例。

该脚本是

$(".button").click(function () {
    $pageID = $(this).attr('name');
    var htmlString = $('#' + $pageID).html();
    $('#1').html(htmlString);
});

$(".button").click(function () {
    $(".button").css('background-position', '0px 0px');
    $(this).delay(50).css('background-position', '0px -40px');
});

$(document).ready(function () {
    $("[name='page1']").trigger('click');
});

对于我使用的第一块

function changeNavigation(id){
    document.getElementById('1').innerHTML=document.getElementById(id).innerHTML;
} 

并且在每个<div id="button">添加了onclick="changeNavigation(id);" 将id分别替换为page1 page2等。 这似乎工作正常。 问题是第二段代码。

我尝试使用

document.getElementById("button").style.background-position="0px -40px";

将class更改为id属性，只是为了对其进行测试，但是它不起作用。 可能是什么问题呢？ 是纯粹的JS不支持background-position吗？

另外，最后，是否可以使用.innerHTML编写JS代码？ 我尝试使用JS和jQuery编写脚本，尽管两者都编写完全相同，但编写的代码无法与.innerHTML 。

Answer 1

尝试

style.backgroundPosition

代替

style.background-position

感谢Anthony Grist。

您使用的是类而不是ID。 所以这就像

document.getElementsByClassName("button")[0].style.backgroundPosition="0px -40px"

Answer 2

连字符在JavaScript中的属性名称中无效。 因此，CSS属性background-position在JavaScript中称为backgroundPosition 。