简单说 通过JS控制CSS的各种方式(下)
来源:互联网 发布:php 字符串拼接函数 编辑:程序博客网 时间:2024/05/29 04:18
说明
上次我们说了8种通过JS控制CSS的方式,但这么多方式,应该用哪一种哪?哪一种又更适合我们呢?今天我们来说说这个。
解释
我们用过的各种类库或者框架中,经常会使用到JS控制CSS的函数,比如JQuery中的css() 方法。
想明白JQuery中的css() 方法的实现原理,看这里
http://www.111cn.net/wy/jquery/97254.htm
今天我们也简单的实现一下这个方法。
//需要两个参数 el,css//el :DOM元素//css :css规则 字符串类型function css(el, css) { //el如果是DOM元素,就修改元素的css if (!!(el && el.nodeType == 1)) { //确保第二个参数是字符串类型的css规则 if (typeof css == 'string' && css.indexOf(':') > 0) { //元素有style对象,然后修改style对象的cssText属性 el.style && (el.style.cssText += ';' + css); } //el如果不是DOM,就发出警告,结束方法 } else { console.warn('css方法需要一个参数,这个参数必须是DOM元素'); return; }}
上面写的这个函数,已经实现了我们要的功能了,其中判断是否为DOM元素的那部分还可以继续提出来作为一个单独的方法,其中修改元素css的部分,是通过修改元素的style对象的cssText属性,这种办法修改css的优先级很高,和直接写内联样式一样。
总结
我们用JS控制CSS,我们还是要考虑css优先级的问题,为了能让设置后的css起作用,我们还是选择优先级高的方法比较好。
阅读全文
0 0
- 简单说 通过JS控制CSS的各种方式(下)
- 简单说 通过JS控制CSS的各种方式(上)
- 简单说 通过CSS实现 文字渐变色 的两种方式
- 简单说 通过CSS的滤镜 实现 火焰效果
- 通过JS+CSS实现简单的遮罩层
- JS控制CSS伪元素的方法(下)
- CodeIgniter通过hook的方式实现简单的权限控制
- CodeIgniter通过hook的方式实现简单的权限控制
- CSS控制页面的几种方式以及各种方式的优先级
- rem适配的两种方式(css媒体查询和js控制)
- 简单的css js控制table隔行变色
- 简单的css js控制table隔行变色
- 简单的css js控制table隔行变色
- 简单整理下CSS里的常用各种选择器
- 简单说 CSS的vertical-align (一)
- 简单说 通过JS的隐式转换,关键时刻救你一命
- IE6下js通过css隐藏select的一个bug
- 通过一段代码简单说js中的this
- Spring Cloud实现微服务架构学习
- ES6 Promise的概念以及小实例
- 同事知识分享
- 安装Storm集群和Zookeeper集群./zkServer.sh status报错Error contacting service. It is probably not running.
- centos安装docker
- 简单说 通过JS控制CSS的各种方式(下)
- windows server 2012/2016 设置多用户远程桌面
- Java三大器之监听器(Listener)的工作原理和代码演示
- linux 下搭建mysql-cluster集群环境
- opencart
- 炫酷的技巧,屌炸的人生(查看命令行完整的输出内容)
- 统计专业人数
- Netty in action—ChannelHandler和ChannelPipeline
- Sqlyog之excel数据导入方法