uniapp修改html样式,关于css:uniapp操作dom改变css样式

在uniapp中，想给元素增加一些动静的css款式，例如transform,

uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{

uni.createSelectorQuery().select(".sticke").style.transform

}).exec()

上述代码根本无法实现给元素增加transform，所以有了申明css变量，

在swiper组件中减少缩略图展现，点击某一项，展现到对应的图片

1.重点在data中注册属性transStyle

2.轮播change事件设置transStyle

getDetail(e,index){

this.currentIndex = index

this.detail = Object.assign(this.detail,e)

this.scrollLeft = index*50

this.transStyle = 'translate('+index*-100+'%, 0px)'

3.点击缩略图，敞开自动播放，延时执行

move(e,index){

this.autoplay = false

this.currentIndex = index

this.detail = Object.assign(this.detail,e)

this.scrollLeft = index*50

this.transStyle = 'translate('+index*-100+'%, 0px)'

setTimeout(()=>{

this.autoplay = true

},5000)

}

4.找到要扭转的元素，设置css变量

#swiper{

.uni-swiper-slide-frame{

transform: var(--transStyle) !important;

}

uniapp修改html样式,关于css:uniapp操作dom改变css样式相关推荐

JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
JavaScript HTML DOM - 改变 CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式如需改变 HTML 元素的样式,请使用这个语法: document.getElementById(id ...
标梵互动教你巧妙使用CSS变量使您的CSS更有吸引力
标梵互动教你巧妙使用CSS变量使您的CSS更有吸引力 2020-11-19 私有「CSS变量」又叫「CSS自定义属性」,为什么会突然提起这个很少人用到的东西呢?因为最近在重构个人官网,不知道为什么突 ...
前端为什么操作DOM的成本是昂贵的
引起成本增加的主要原因:重绘和重排(回流) 重排(回流):渲染树(render tree)的元素的内容.结构.位置或尺寸发生了变化,需要重新计算样式和渲染树重绘 :节点的一些样式(背景色,边框颜色, ...
用JS改变html样式
用JS改变HTML样式在html中定义样式的方法有3种: 通过link标签链接外部样式使用style标签定义嵌入式样式使用标签style属性定义样式用JS改变的HTML样式无非就是上面三种,改 ...
Angular学习笔记64：使用Render2安全操作DOM元素
在项目中有时候需要直接操作DOM,但是这样直接访问 DOM 会导致应用很容易受到在 XSS 攻击.所以并不建议直接访问 DOM. 在Angular 访问DOM 需要使用 Render2 来实现自定义渲 ...
CSS基础学习三：CSS语法
CSS语法分为基础语法和高级语法. 一CSS 基础语法 (1)CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,请使用花括号来包围声明. selector {declarat ...
Uinapp中js修改css变量,【前端技术】uniapp操作dom，改变css样式
在uniapp中,想给元素添加一些动态的css样式,例如transform, uni.createSelectorQuery().select(".sticke").boundin ...
js修改css hover样式,JS实现css hover操作的方法示例
JS实现css hover操作的方法示例发布时间:2020-09-01 14:46:32 来源:脚本之家阅读:118 作者:谢玉胜本文实例讲述了JS实现css hover操作的方法.分享给大家供 ...

uniapp修改html样式,关于css:uniapp操作dom改变css样式

uniapp修改html样式,关于css:uniapp操作dom改变css样式相关推荐

最新文章

热门文章