使用javascript时如何调用.toggle() function？
[英]How is .toggle() function being called when using javascript?
问题描述
I am learning javascript and I have a box and i want to change its class name.
我正在学习 javascript 并且我有一个盒子，我想更改它的 class 名称。 So,所以，
var el=document.querySelectorAll('.myClass'); for(var x=0;x<el.length;x++){ el[x].onclick=function(){ // this.classList.toggle(box1); how is this.classList.toggle possible here? I am not seeing it when doing console.dir(this.classList) console.dir(this.classList); } }
<style>.box1{ background-color: aqua; font-size: 1.5em; color: #fff; }.box2{ background-color: red; font-size: 0.5em; color: #ddd; } #one,#two,#three{ width: 100px; height: 100px; display: inline-block; border: 1px solid black; } </style>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="one" class="myClass">Box 1</div> <div id="two" class="myClass">Box 2</div> <div id="three" class="myClass">Box 3</div> </body> </html>
When I click the box I am getting the current object in console.log(this);当我单击该框时，我在console.log(this); . . I saw the classList property.我看到了 classList 属性。 So I am fine upto console.dir(this.classList);所以我很满意console.dir(this.classList); .But,my tutor is using this.classList.toggle(box1); .但是，我的导师正在使用this.classList.toggle(box1); .I didnt understand how he is getting option to call .toggle() function there? .我不明白他如何选择调用.toggle() function 那里？ When i looked at当我看着
`console.log(this.classList);`
I saw only我只看到
DOMTokenList ["myClass", value: "myClass"]
0: "myClass"
length: 1
value: "myClass"
__proto__: DOMTokenList
But i didnt see any option of.toggle() there?但我没有看到任何选项 of.toggle() 那里？ But how can we know that toggle can be used after this.classList since I am not seeing any property of toggle() function after this.classList ?但是我们怎么知道可以在this.classList之后使用切换，因为在this.classList之后我没有看到 toggle() function 的任何属性？ Please clarify me.请澄清一下。
2 个解决方案
解决方案1
1 2020-05-19 13:40:16
From MDN website :来自MDN 网站：
When it comes to inheritance, JavaScript only has one construct: objects.
Therefore to find what properties (functions, setters, getters.. etc) exist you can view them under __proto__ .因此，要查找存在哪些属性（函数、setter、getter 等），您可以在__proto__下查看它们。
解决方案2
0 2020-05-19 10:57:57
console.log only logs enumerable properties . console.log只记录可枚举的属性。 toggle isn't enumerable. toggle是不可枚举的。
console.log("toggle" in document.body.classList); console.log(document.body.classList.propertyIsEnumerable("toggle"));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.