js css样式操作代码(批量操作)
2023-09-14 09:12:17 时间
js css样式操作代码(批量操作)
用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果。并且考虑到效率。
我们用js书写css样式通常会用下面的两种方式:
一般情况下我们用js设置元素对象的样式会使用这样的形式:
var element= document.getElementById(”id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;
但是上面的方法有一个缺点,样式一多,代码就很多;而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。
js中有一个cssText的方法:
语法为:obj.style.cssText(”样式”);
上面的代码我们可以修改成:
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
一般情况下我们用js设置元素对象的样式会使用这样的形式:
var element= document.getElementById(”id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;
但是上面的方法有一个缺点,样式一多,代码就很多;而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。
js中有一个cssText的方法:
语法为:obj.style.cssText(”样式”);
上面的代码我们可以修改成:
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
相关文章
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(JQuery.js)绚丽的3D星空动画
- 利用YUI Compressor对JS、CSS文件进行压缩
- JQuery-zTree.js使用范例
- [Node.js] Mock an API for Local Development in React with Mirage JS
- JS获取节点方法
- [jQ/PHP]再谈使用JS数组储值的运用(提交PHP处理)
- JS奇葩语法(二)
- Angular 开发里的 polyfills.js、runtime.js、styles.js 和 vendor.js 是用来做什么的
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针
- JS推断是否为JSON对象及是否存在某字段
- MVC js动态生成from提交数据然后生成文件下载
- webSocket 前端 js 加入 心跳机制 的基本写法
- JS:使用Mock.js生成随机数据,拦截 Ajax 请求
- JS与ES6高级编程学习笔记(二)——函数与作用域
- 001-mock.js安装使用
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03
- C++搭建websocket服务器并与浏览器js通信