zoukankan      html  css  js  c++  java
  • 前端溯源:样式

    获取相关节点 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`
      }
    

      

  • 相关阅读:
    Ubuntu16.04下Django项目的部署
    Ubuntu16.04 下python2 | python3
    请求头请求体对应表
    Django项目开发-小技巧
    前端验证后端验证码问题
    Ugly Number
    移动0元素
    图片(画布上的图片)上传总结
    从矩阵中查找一个数
    搜索框(附带事件函数)
  • 原文地址:https://www.cnblogs.com/xred/p/14666658.html
Copyright © 2011-2022 走看看