通过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 常用校验函数
Mar 26 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
js中settimeout方法加参数
Feb 28 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue实现评论列表功能
Oct 25 Javascript
react合成事件与原生事件的相关理解
May 13 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+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
详解Python文本操作相关模块
2017/06/22 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
信息技术专业个人自我评价
2013/12/11 职场文书
《赶海》教学反思
2014/04/20 职场文书
个性车贴标语
2014/06/24 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技