通过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 相关文章推荐
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
js图片预加载示例
Apr 30 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
浅谈Express异步进化史
Sep 09 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
js 计数排序的实现示例(升级版)
Jan 12 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中smarty模板条件判断用法实例
2015/06/11 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
js实现延迟加载的方法
2015/06/24 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python实现ip查询示例
2014/03/26 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
气象学专业个人求职信
2014/03/15 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
师恩难忘教学反思
2014/04/27 职场文书
初中生毕业评语
2014/12/29 职场文书
人事任命书范本
2015/09/21 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python