So In javascript you can do things like

document.querySelector('html').style.filter = 'invert(100%)'

Which Inverts colors on the entire webpage but is there anyway to use

document.querySelector('html').style.pointer = 'something'

or a way to add a css rule or something to the document?

example you have an element like this

hello

.why {}

CodePudding user response：

You can add a css class to specific element with (and then create the styles from the css file):

[NameOfTheElement].classList.add("mystyle")

This will work for the document:

document.querySelector('html').classList.add('new-class');

This will work for the body:

document.querySelector('body').classList.add('new-body-class')

CodePudding user response：

You could write to the document using document.write

document.write(`
<style>
  #text {
    color: red;
  }
</style>`)

<h1 id='text'>Hello</h1>

Or, you can also create an element and append it to the document

let style = document.createElement('style')
style.innerHTML = `
.text {
  color: red;
}
`

document.body.appendChild(style)

<h1 class='text'>Hello</h1>

CodePudding user response：

There are a few ways.

1. If you already have styles defined for a certain class within your stylesheet, you can do what Erasmo said above:

element.classList.add('className');

2. You can also use:

element.style.color = 'white';

3. Or add a style attribute to the element:

element.setAttribute('style', 'color: white; background-color: green;');