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`
      }
    

      

  • 相关阅读:
    (一)主动学习概念与技术
    mybatis 分页插件PageHelper 使用方法
    单例模式-Singleton
    解决tomcat启动报 java.lang.IllegalArgumentException: Invalid <url-pattern> login in servlet mapping
    如何在MSDN上获取Win7镜像
    解决 Could not find resource com/baidou/dao/UserMapper.xml
    4、XML 配置
    3、使用Map传参 & 模糊查询
    图解python环境搭建
    2、CRUD
  • 原文地址:https://www.cnblogs.com/xred/p/14666658.html
Copyright © 2011-2022 走看看