javascript - 将 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');
});

对于我使用的第一个 block

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

感谢安东尼·格里斯特。

您使用的是类而不是 ID。所以它会是这样的

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