在Javascript中的object.method()vs object.method

时间:2018-03-20 05:31:54

标签: javascript

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

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

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

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

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

5 个答案:

答案 0 :(得分:1)

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

注意: querySelector()方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项,请改用querySelectorAll()方法。

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

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

  

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

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

另请注意

  

document.querySelector('dice')

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

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

答案 3 :(得分:0)

Style是DOM对象的property,而不是method

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

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

person.name.first = 'CDE';

类似于

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

答案 4 :(得分:0)

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

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