Question

我正在尝试在javascript中创建一些可拖动的框。我决定在CSS和“box”类中创建一个空类“draggable”。代码如下：

<!DOCTYPE html>
<html>

<head>
    <style>
    .draggable
    {

    }
    .box
    {
        position: absolute;
        width: 80px; height: 60px;
        padding-top: 10px;
        text-align: center;
        font-size: 40px;
        background-color: #222;
        color: #CCC;
    }
    </style>
</head>

<body>
<div class="draggable box">1</div>
<div class="draggable box">2</div>
<div class="draggable box">3</div>
<script>
    var draggableStuff = document.querySelectorAll('draggable');
    var tabLength = draggableStuff.length;
    alert(tabLength);
</script>
</body>

问题是tabLength总是为零。我希望得到一个充满所有可拖动内容的数组。我是javascript的新手。我在这里错过了什么？

Answer 1

您希望按类选择元素，因此不要忘记点：

var draggableStuff = document.querySelectorAll('.draggable');

另一种选择是使用document.getElementsByClassName：

var draggableStuff = document.getElementsBYClassName('draggable');

Answer 2

我遇到过这种情况。虽然它太旧了，但我想帮助别人回答：

选择具有特定属性的所有元素（无论它是什么，可能是div，span，h1等...）

没有价值？：

var dragables = document.querySelectorAll('[draggable]');

有价值？：

var dragables = document.querySelectorAll('[draggable="true"]');

document.querySelectorAll长度始终为0

2 个答案: