Skip to main content
add permalink to github source
Source Link
KiraLT
  • 2.6k
  • 1
  • 26
  • 38

First of all, you should use querySelector, not queryselector.

Regarding your issue, there is a reason why VScode IntelliSense doesn't show style attribute.

Let's look at this example:

const element = document.querySelector('.classname') const element2 = document.querySelector('body') 

element has a type of Element. And element2 has type HTMLBodyElement which is subclass of HTMLElement.

Element VS HTMLElement

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. And it doesn't have style attribute.

The HTMLElement interface represents any HTML element. It extends Element and has style attribute.

Then why element2 return HTMLBodyElement?

VSCode has hardcoded typing when you selecting by exact tag name. You can see that in lib.dom.d.tslib.dom.d.ts

How can fix that?

You can add additional checking and VSCode will understand it:

const element = document.querySelector('.classname') if (element instanceof HTMLElement) { element.style.display = 'none' } 

First of all, you should use querySelector, not queryselector.

Regarding your issue, there is a reason why VScode IntelliSense doesn't show style attribute.

Let's look at this example:

const element = document.querySelector('.classname') const element2 = document.querySelector('body') 

element has a type of Element. And element2 has type HTMLBodyElement which is subclass of HTMLElement.

Element VS HTMLElement

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. And it doesn't have style attribute.

The HTMLElement interface represents any HTML element. It extends Element and has style attribute.

Then why element2 return HTMLBodyElement?

VSCode has hardcoded typing when you selecting by exact tag name. You can see that in lib.dom.d.ts

How can fix that?

You can add additional checking and VSCode will understand it:

const element = document.querySelector('.classname') if (element instanceof HTMLElement) { element.style.display = 'none' } 

First of all, you should use querySelector, not queryselector.

Regarding your issue, there is a reason why VScode IntelliSense doesn't show style attribute.

Let's look at this example:

const element = document.querySelector('.classname') const element2 = document.querySelector('body') 

element has a type of Element. And element2 has type HTMLBodyElement which is subclass of HTMLElement.

Element VS HTMLElement

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. And it doesn't have style attribute.

The HTMLElement interface represents any HTML element. It extends Element and has style attribute.

Then why element2 return HTMLBodyElement?

VSCode has hardcoded typing when you selecting by exact tag name. You can see that in lib.dom.d.ts

How can fix that?

You can add additional checking and VSCode will understand it:

const element = document.querySelector('.classname') if (element instanceof HTMLElement) { element.style.display = 'none' } 
deleted 65 characters in body
Source Link
KiraLT
  • 2.6k
  • 1
  • 26
  • 38

First of all, you should use querySelector, not queryselector.

Regarding your issue, there is a reason why VScode IntelliSense doesn't show style attribute.

Let's look at this example:

const element = document.querySelector('.classname') const element2 = document.querySelector('body') 

element has a type of Element. And element2 has type HTMLBodyElement which is subclass of HTMLElement.

Element VS HTMLElement

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. And it doesn't have style attribute.

The HTMLElement interface represents any HTML element. It extends Element and has style attribute.

To sum up, document can have different types of elements.

Then why element2 return HTMLBodyElement?

VSCode has hardcoded typing when you selecting by exact tag name. You can see that in lib.dom.d.ts

How can fix that?

You can add additional checking and VSCode will understand it:

const element = document.querySelector('.classname') if (element instanceof HTMLElement) { element.style.display = 'none' } 

First of all, you should use querySelector, not queryselector.

Regarding your issue, there is a reason why VScode IntelliSense doesn't show style attribute.

Let's look at this example:

const element = document.querySelector('.classname') const element2 = document.querySelector('body') 

element has a type of Element. And element2 has type HTMLBodyElement which is subclass of HTMLElement.

Element VS HTMLElement

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. And it doesn't have style attribute.

The HTMLElement interface represents any HTML element. It extends Element and has style attribute.

To sum up, document can have different types of elements.

Then why element2 return HTMLBodyElement?

VSCode has hardcoded typing when you selecting by exact tag name. You can see that in lib.dom.d.ts

How can fix that?

You can add additional checking and VSCode will understand it:

const element = document.querySelector('.classname') if (element instanceof HTMLElement) { element.style.display = 'none' } 

First of all, you should use querySelector, not queryselector.

Regarding your issue, there is a reason why VScode IntelliSense doesn't show style attribute.

Let's look at this example:

const element = document.querySelector('.classname') const element2 = document.querySelector('body') 

element has a type of Element. And element2 has type HTMLBodyElement which is subclass of HTMLElement.

Element VS HTMLElement

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. And it doesn't have style attribute.

The HTMLElement interface represents any HTML element. It extends Element and has style attribute.

Then why element2 return HTMLBodyElement?

VSCode has hardcoded typing when you selecting by exact tag name. You can see that in lib.dom.d.ts

How can fix that?

You can add additional checking and VSCode will understand it:

const element = document.querySelector('.classname') if (element instanceof HTMLElement) { element.style.display = 'none' } 
Source Link
KiraLT
  • 2.6k
  • 1
  • 26
  • 38

First of all, you should use querySelector, not queryselector.

Regarding your issue, there is a reason why VScode IntelliSense doesn't show style attribute.

Let's look at this example:

const element = document.querySelector('.classname') const element2 = document.querySelector('body') 

element has a type of Element. And element2 has type HTMLBodyElement which is subclass of HTMLElement.

Element VS HTMLElement

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. And it doesn't have style attribute.

The HTMLElement interface represents any HTML element. It extends Element and has style attribute.

To sum up, document can have different types of elements.

Then why element2 return HTMLBodyElement?

VSCode has hardcoded typing when you selecting by exact tag name. You can see that in lib.dom.d.ts

How can fix that?

You can add additional checking and VSCode will understand it:

const element = document.querySelector('.classname') if (element instanceof HTMLElement) { element.style.display = 'none' }