通过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 相关文章推荐
javascript中的有名函数和无名函数
Oct 17 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
JavaScript Split()方法
Dec 18 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
vue实现全选、反选功能
Nov 17 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
Vue的Options用法说明
Aug 14 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
原生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
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
简述php环境搭建与配置
2016/12/05 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
广告显示判断
2006/08/31 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
详解vue-router 路由元信息
2017/09/13 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python实现websocket的客户端压力测试
2019/06/25 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
社区居务公开实施方案
2014/03/27 职场文书
户籍证明书标准模板
2014/09/10 职场文书
老人节标语大全
2014/10/08 职场文书
黄河绝恋观后感
2015/06/08 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
部门主管竞聘书
2015/09/15 职场文书