首页 > 其他分享 >通过注释一行代码 开启关闭一个div的css样式 - 开发调试技巧

通过注释一行代码 开启关闭一个div的css样式 - 开发调试技巧

时间:2024-09-14 10:04:14浏览次数:11  
标签:样式 代码 注释 css div 调试

通过注释一行代码 开启关闭一个div的css样式 - 开发调试技巧

需求:开发的时候,我需要对页面的某个样式反复开关,但是html不能通过注释来开关,所以可以在div的上面加一个js
但是vue的template里面不能加script,需要加component

重点代码 不写v-bind vscode有红色波浪

<component v-bind:is="'script'">
      document.getElementById("bigWrapId").style.marginLeft = "-1200px";
    </component>

整体代码

<v-scale-screen
    :autoScale="false"
    width="1920"
    height="1080"
    :boxStyle="{
      backgroundColor: '',
    }"
  >
    <!-- margin-left: -1200px; -->
    <component v-bind:is="'script'">
      document.getElementById("bigWrapId").style.marginLeft = "-1200px";
    </component>
    <div id="bigWrapId" style="width: 1920px; height: 1080px">
      <bigScreen></bigScreen>
    </div>
  </v-scale-screen>

标签:样式,代码,注释,css,div,调试
From: https://www.cnblogs.com/pengchenggang/p/18413398

相关文章

  • modbus调试助手/mqtt调试工具/超轻巧物联网组件/多线程实时采集/各种协议支持
    一、前言说明搞物联网开发很多年,用的最多的当属modbus协议,一个稳定好用的物联网组件是物联网平台持续运行多年的基石,所以这个物联网组件从一开始就定位于自研,为了满足各种场景的需求,当然最重要的一点就是大大提升了自己对该协议的深度理解和应用,尤其是面对各种场景需求,逐步调整迭......
  • 【CSS in Depth 2 精译_030】5.2 Grid 网格布局中的网格结构剖析(下)
    当前内容所在位置(可进入专栏查看其他译好的章节内容)第一章层叠、优先级与继承(已完结)1.1层叠1.2继承1.3特殊值1.4简写属性1.5CSS渐进式增强技术1.6本章小结第二章相对单位(已完结)2.1相对单位的威力2.2em与rem2.3告别像素思维2.4视口的相对单位2.5......
  • CSS基本布局理解——WEB开发系列38
    对CSS学习已经接近尾声,下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。题1:基于栅格布局的现代博客首页设计题目要求:创建一个博客首页布局,包含一个顶部导航栏、一个主要的内容区域(左侧为博客文章列表,右侧为一个侧边栏显示推荐内容),以及一个底部的页脚。要求......
  • 【油猴脚本】00003案例 Tampermonkey油猴脚本引入css 库,油猴脚本css库的使用
    前言:哈喽,大家好,今天给大家分享html+css绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • Pinely Round 2 (Div. 1 + Div. 2)
    A.Channel题意:最开始网上有\(a\)个人,共\(q\)次改变,每一次有一个人加入或离开。总共\(n\)个人,求这\(n\)个人是否都上过网,有没上过网的,都有可能。思路:贪心地每次选取尽可能多和少的人即可。提交记录B.SplitSort题意:给定一个排列,每次可以选取一个数\(x\),将排列划......
  • 【漏洞复现】NUUO网络视频录像机 css_parser.php 任意文件读取
            NUUO网络视频录像机(NetworkVideoRecorder,简称NVR)是NUUOInc.生产的一种专业视频监控设备,它广泛应用于零售、交通、教育、政府和银行等多个领域。能够同时管理多个IP摄像头,实现视频录制、存储、回放及远程监控等功能。它采用先进的视频处理技术,提供高清、流畅......
  • tsx css class样式如何使用
    参考代码import{defineComponent,PropType,h,computed,ref,watch}from'vue';importtype{Reactive,Ref}from'vue';importstylesfrom'../scss/child.module.scss';import'../scss/child.scss';//这引入的样式是全局的,会影响其......
  • hadoop基于Python对b站热门视频的数据分析与研究(源码+文档+调试+可视化大屏)
    收藏关注不迷路!!......
  • vue2 + scss 全局引入 变量使用
    百度以及时AI帮助说的配置方式都大差不差,但是我的总是报错,意思就是变量找不到,报错如下Foraguideandrecipesonhowtoconfigure/customizethisproject,<br> 然后AI和文章写的vue.config.js的配置内容基本如下module.exports={css:{loaderOp......
  • 一文彻底搞懂数字孪生、仿真与虚拟调试
    在项目实施之前对设备和系统进行测试和验证的能力对于任何制造商来说都至关重要。然而,在这项技术的早期阶段,并非每个制造商都为数字化转型做好了准备。 作为一种更高形式的仿真,数字孪生收集数据以创建精准的仿真,来显示制造设备和系统的运行、潜在故障以及未来可能的维护问题。数字......