Question

我想知道如何在以下上下文中引用HTML id或JavaScript中的类。

<script type="text/javascript">
    (function() {
        var menu = document.querySelector('ul'), 
            menulink = document.querySelector('**REFERENCE CLASS**');

        menulink.addEventListener('click', function(e) {
            menu.classList.toggle('active');
            e.preventDeafult();
        });
    })();

</script>

感谢您能提供的任何帮助，

Answer 1

假设您有一个class属性等于“ my-class”的元素，而您想使用JavaScript选择该元素。作为示例，我将基于其class属性选择一个元素，并仅使用JavaScript将其颜色更改为绿色。

// referencing the element with class attribute containing my-class using querySelector() method that you used it in your code, notice the " . " (dot) before the class-name
var myClassDiv = document.querySelector('.my-class');
// changing the text color to green 
myClassDiv.style.color = '#0F0';

<div class="my-class">by default my color is black but JavaScript made me green !</div>

说明：

方法querySelector()接收一个表示标准CSS选择器的字符串。即querySelector('body #main > ul.menu > li.class-name')，并且由于同一个选择器可以匹配同一文档中的许多元素，因此此方法仅返回与选择器匹配的第一个元素。
要获取所有与选择器匹配的元素，可以使用querySelectorAll()返回匹配元素的array。
您想基于其类名选择一个元素，JavaScript提供了一种基于类名获取所有元素的方法：getElementsByClassName()返回一个包含以下内容的array即使只有一个元素，也可以匹配。当您在CSS中编写时，它会接收一个表示类名称的字符串，否，即，类名称前的getElementsByClassName（'class-name'）NO点。

要完成与答案顶部相同的任务，我将使用getElementsByClassName()而不是querySelector()。

// referencing the element with class attribute containing my-class 
var myClassDiv = document.getElementsByClassName('my-class')[0];
// changing the text color to green 
myClassDiv.style.color = '#0F0';

<div class="my-class">by default my color is black but JavaScript made me green !</div>

希望我进一步推动了你。

HTML / JS引用ID

1 个答案: