Question

我是JavaScript的新手，我很难理解这种语法。

document.querySelector('dice').style.display='none';

我的理解是我们在文档对象上调用querySelector方法 - 这将返回一个选择。现在我们在这个选择上调用style方法 - 这将返回一个样式对象。接下来，我们将其显示属性更改为“无”＆＃39;隐藏它。

如果这是正确的，则不应该是.style().display = 'none'?

如果样式确实是一种方法，那么在调用时不应该使用括号吗？

Answer 1

querySelector（）方法返回与文档中指定的CSS选择器匹配的第一个元素。

注意： querySelector（）方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项，请改用querySelectorAll（）方法。

如果选择器匹配多次使用的文档中的ID（请注意，“id”在页面中应该是唯一的，并且不应多次使用），它将返回第一个匹配元素。

点击here了解有关查询选择器的详情。

'style'属性用于通过脚本将一些内联样式应用于dom元素。根据你提到的例子， document.querySelector（'dice'）。style.display ='none'; 只是隐藏第一个dom元素'骰子'。

Answer 2

style用于css。你不应该使用style()。当您键入element.style.dispaly时，您允许浏览器知道您要更改元素的css属性。

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

获取时，它返回一个CSSStyleDeclaration对象，该对象包含该元素的所有样式属性的列表...

它恰好被作为引用对象的普通属性访问，而不是返回对象的函数。

另请注意

document.querySelector('dice')

除非dice是特殊的HTML标记，否则

可能无效。您可能正在寻找.querySelector('.dice')（班级选择）或.querySelector('$dice')（ID选择）。

Answer 4

Style是DOM对象的property，而不是method。

所以它与使用以下语法一样好：

const person = {
  name: {
   first: 'ABC'
  }
}

person.name.first = 'CDE';

类似于

document.querySelector('dice').style.display='none';

Answer 5

document.querySelector()是一种方法。这意味着它是一个存储为对象属性的函数。当您调用方法document.querySelector('div')时，它将返回文档中的第一个div元素。返回的值将是包含对象属性的对象。 Link to a jsBin that displays document.querySelector output

所以document.querySelector('div').style将显示其样式。你可以从中获取特定的价值并改变其风格。

在Javascript中的object.method（）vs object.method

5 个答案: