通过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鼠标事件大全 推荐收藏
Nov 01 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
利用vue实现模态框组件
Dec 19 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
解决vue组件中click事件失效的问题
Nov 09 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
ajax实现无刷新分页(php)
2010/07/18 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
介绍Python中的文档测试模块
2015/04/28 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python中的pack和unpack的使用
2018/03/12 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python 创建一维的0向量实例
2019/12/02 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
两则小学生的自我评价分享
2013/11/14 职场文书
期末评语大全
2014/05/04 职场文书
服务行业口号
2014/06/11 职场文书
公司授权委托书
2014/10/17 职场文书
教师思想工作总结2015
2015/05/13 职场文书
离婚纠纷代理词
2015/05/23 职场文书