通过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中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
react-native使用leanclound消息推送的方法
Aug 06 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
vue 实现走马灯效果
Oct 28 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
JavaScript 与 TypeScript之间的联系
Nov 27 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+MSSQL分页的例子
2006/10/09 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Python 的内置字符串方法小结
2016/03/15 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python 解析简单的XML数据
2020/07/24 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
公司晚会主持词
2014/03/22 职场文书
生态养殖创业计划书
2014/05/06 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
市场调查策划方案
2014/06/10 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
销售代理协议书
2014/09/30 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
2016新年致辞
2015/08/01 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python