前端溯源：样式

获取相关节点 class： document.querySelector('.q-header') 

获取相关节点 tag: document.querySelector('h2, h3')

 

js改变css样式的5种方式

第一种：使用 cssText 全属性

*.style.cssText = "height: 666px !important ";

第二种：使用 setProperty(属性名，属性值) 方法

*.style.setProperty("width", "666px");

第三种：直接使用单属性

*.style.width="666px";

第四种：直接修改名字

function changeStyle3() {
var obj = document.getElementById( "btnB" );

obj.className = "style2";
//或者
obj.setAttribute( "class" , "style2" );
}

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅 设置/更改 值。

第五种：修改外联样式

<link href= "css1.css" rel= "stylesheet" type= "text/css" id= "css" />

function changeStyle4() {
var obj = document.getElementById( "css" );
obj.setAttribute( "href" , "css2.css" );
}

 

例如: 

resize () {
    this.dpr = window.devicePixelRatio = 1
    const hedi = document.querySelector('.q-header').clientHeight
    console.warn(JSON.stringify(this.dpr))
    this.canvas.style.width = `${window.innerWidth}px`
    this.canvas.style.height = `${window.outerHeight - hedi} px`
    this.canvas.width = Math.floor(window.innerWidth * this.dpr)
    this.canvas.height = Math.floor(window.innerHeight * this.dpr) - hedi
    document.querySelector('.bg').style.cssText = `height:${Math.floor(window.innerHeight * this.dpr) - hedi}px !important`
  }