1、原生 js添加样式很多时可以合并在一起写:

var oPopwin = document.getElementById('vpage');
oPopwin.style.margin = 'initial';
oPopwin.style.marginTop = 'initial';
oPopwin.style.bottom = "0"
oPopwin.style.right = "0"

可以这样写简化代码:

var oPopwin = document.getElementById('vpage');
oPopwin.style ='margin:initial;marginTop:initial;bottom:0;right:0;'

2、HTML DOM classList 属性

可添加、删除一个或多个class

document.getElementById('div1').classList.add('add1','add2','add3')
document.getElementById("div1").classList.remove("add1",'add3')

3、JS的DOM获取元素可以这样写:

var oVpage = document.getElementById('vpage');
var tjpos=oVpage.getElementsByTagName('p')[0] //tjpos是[object HTMLParagraphElement]
//<p class="tjpos">开屏测试视频</p>
console.log(tjpos)

dom添加样式可以这样写的更多相关文章

  1. element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格,并自动根据单元格数据进行添加样式

    element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格,并自动根据单元格数据进行添加样式 本文重点写 element-u ...

  2. Javascrip动态添加样式,Dom操作,获取自定义属性

    var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...

  3. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  4. DOM操作样式表及其兼容性

    DOM操作样式表的时候,存在很多浏览器兼容上的问题,测试的时候用的是Firefox 28.0.IE11.IE8.Chrome.测试的时候发现,不兼容问题基本上都是IE8和非IE浏览器之家的问题,很多I ...

  5. DOM Style样式对象的详细用法

    DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     ...

  6. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  7. DomFlags - 给 DOM 添加书签,方便调试

    DomFlags 所以一款 Chrome 浏览器扩展程序提,供了一种新的方式与浏览器开发者工具互动.DomFlags 让你可以给 DOM 元素创建快捷键,就像用于导航 DOM 树的书签.它们可以帮助您 ...

  8. v-html里面添加样式

    项目中,使用V-html渲染的页面,要添加样式,改如何做 解决方案1:在updated生命周期函数中,js动态配置样式,代码如下: updated() { $('.msgHtmlBox').find( ...

  9. 原生js动态添加style,添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  10. Vue.js随笔二(新建路由+component+添加样式+变量的显示)

    创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...

随机推荐

  1. python中的数学函数

  2. 【数据结构与算法】希尔排序 python和c++实现

    算法思路 每一次:固定间隔把数据分组,每一组进行排序 每次比上次选取更小的间隔分组,再每组排序,直到间隔为1 代码 c++:(越看越不明白了,后看) int gap = length;//length ...

  3. 前端使用工具规范commit信息

    前言 通过工具规范git提交信息也是工程化的一部分,在前端领域有一些工具为我们提供了相关功能,在这里做一下使用总结. commitlint commitlint是什么? 就像eslint用来检查js代 ...

  4. M.2 SSD固态硬盘上安装windows问题

    近来M2硬盘大降价,笔记就趁便宜买了一个2T的M.2固态硬盘,插在笔记本上,接下来安装win11,本想以前安装多次,也是老手了,没想到遇到很多问题,一度陷入僵局,不过最终还是安装成功了,下面记录下安装 ...

  5. [OpenCV实战]3 透明斗篷

    目录 1寻找和存储背景帧 2红色区域检测 3提取红色区域 4背景帧红布区域替换当前帧红布区域. 5工程代码 参考 弄出哈利波特电影里一样效果的透明斗篷.也就是一个视频里,将红布弄成透明.类似下面的效果 ...

  6. B站地区限制破解方法

    B站地区限制破解方法 当我们观看bilibili番剧时,经常会看到"仅限港澳台地区"的字样.那么,有没有一种方法,不需要挂梯子,就可以观看这些被限制的番剧呢? 本教程只适用于bil ...

  7. 真正“搞”懂HTTP协议07之body的玩法(实践篇)

    我真没想到这篇文章竟然写了将近一个月,一方面我在写这篇文章的时候阳了,所以将近有两周没干活,另外一方面,我发现在写基于Node的HTTP的demo的时候,我不会Node,所以我又要一边学学Node,一 ...

  8. 《STL源码剖析》Sort排序分析

    整体而言: sort算法在数据量大时采用Quick Sort(快速排序),一旦分段后的数据量小于某个门槛,为避免Quick Sort的递归调用带来过大的额外负担,就改用Insertion Sort(插 ...

  9. 【白话模电1】PN结与二极管

    距离上一次写半导体,已经过了很久了,上次分享了本征半导体的基本概念: https://zhuanlan.zhihu.com/p/109483580 今天给大家聊聊半导体工业中的基础:PN结与二极管 1 ...

  10. Openmp Runtime 库函数汇总(下)——深入剖析锁🔒原理与实现

    Openmp Runtime 库函数汇总(下)--深入剖析锁原理与实现 前言 在本篇文章当中主要给大家介绍一下 OpenMP 当中经常使用到的锁并且仔细分析它其中的内部原理!在 OpenMP 当中主要 ...