通过js为元素添加多项样式,浏览器全兼容写法


Posted in Javascript onAugust 30, 2014

js给元素添加多项样式,浏览器全兼容示例写法:

<a href="javascript:;" id="test" style="font-size:25px;background:#080;">测试3</a>
<script>
var obj=document.getElementById("test");
var oldStyle=obj.style.cssText;
alert(oldStyle);
obj.style.cssText="border:2px red solid;color:#f00;"+oldStyle;
</script>

js给元素添加多项样式,最快捷方便的是使用cssText属性,但其会重写整个style原有的值,要保留原先的style样式值,很简单,可像上示例中一样,用一个变量记录下原先的style原始值,再做一个字符串的拼接即可。

但要注意的一点是:ie8及以下浏览器obj.style.cssText返回的最后一个样式值是没分号的,形如:font-size:25px;background:#080 。只想说,ie一如既往的让人感觉不爽,呵呵。

所以示例中有意将oldStyle放置在字符串拼接的后面,这样拼接的样式字符串就算最后一个样式值没分号,也不会出问题,各浏览器样式应用显示就一致了,这也算是一个小技巧吧,没啥技术含量,但易忽略或忘记,知道自己记性不好,Mark下 ^_^

Javascript 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 #Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 #Javascript
仿百度联盟对联广告实现代码
Aug 30 #Javascript
jQuery针对各类元素操作基础教程
Aug 29 #Javascript
jQuery事件用法实例汇总
Aug 29 #Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 #Javascript
You might like
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
js 对象是否存在判断
2009/07/15 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
七一讲话心得体会
2014/09/05 职场文书
拉贝日记观后感
2015/06/05 职场文书
技术入股协议书
2016/03/22 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
vue中data里面的数据相互使用方式
2022/06/05 Vue.js