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。

将jQuery转换为纯JavaScript

2 个答案: