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. 【SQL真题】SQL1: 各个视频的平均完播率 【AVG/SUM/IF/CASE】

    题目: https://www.nowcoder.com/practice/96263162f69a48df9d84a93c71045753?tpId=268&tqId=2285032& ...

  2. 跨机房ES同步实战

    作者:谢泽华 背景 众所周知单个机房在出现不可抗拒的问题(如断电.断网等因素)时,会导致无法正常提供服务,会对业务造成潜在的损失.所以在协同办公领域,一种可以基于同城或异地多活机制的高可用设计,在保障 ...

  3. Velero 系列文章(二):使用 Helm 安装 Velero

    概述 本文是通过 Helm 3 来安装 Velero, 只做最基本的安装.并计划将 YAML (只备份 YAML, 不备份 Volume) 备份到腾讯云的 COS(兼容 S3, 所以可以通过 AWS ...

  4. Mattermost 笔记

    目录 部署 配置 客户端 桌面程序 Android 使用 扩展 Jenkins Hubot 机器人 Jira GitHub Mattermost 是一个开源.可私有化部署的在线通讯平台,可以和Gith ...

  5. vue项目 h5上拉加载(分页功能)

    <template> <div class="receivable"> <div class="application-header fle ...

  6. Qt大型工程开发技术选型Part3:Qt调用C#编写的COM组件实例

    Qt大型工程开发技术选型Part3:Qt调用C#编写的COM组件实例以及错误总结 ok,前面铺垫了那么多,现在来写一个开发实例,我会把其中隐藏的坑和陷阱简单谈谈,并在文章最后总结. 不愿意看长篇大论的 ...

  7. 何为GUI???

    1.GUI是什么–简介 GUI的全称为Graphical User Interface,图形化界面或图形用户接口,是指采用图形方式显示的计算机操作环境用户接口.与早期计算机使用的命令行界面相比,图形界 ...

  8. 手写Pinia存储的数据持久化插件

    Pinia和Vuex的通病 Pinia和vuex的通病就是,页面刷新会导致数据丢失 解决通病 一.新建store import { defineStore } from 'pinia' //单独存放S ...

  9. 使用idea进行gitee代码管理

    目录 1.在idea插件市场安装gitee插件 2.把本地仓库的release分支上的代码合到dev分支上 3.把本地dev分支上的代码合到远程dev分支上去 1.在idea插件市场安装gitee插件 ...

  10. [OpenCV实战]25 使用OpenCV进行泊松克隆

    目录 1 Seamless Cloning实现 1.1 Seamless Cloning实例 1.2 正常克隆(NORMAL_CLONE)与混合克隆(MIXED_CLONE) 1.2.1 Normal ...