通过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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
JavaScript中的small()方法使用详解
2015/06/08 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
解决django FileFIELD的编码问题
2020/03/30 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
weblogic面试题
2016/03/07 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
年会主持词结束语
2014/03/27 职场文书
教师党员一句话承诺
2014/03/28 职场文书
宣传工作经验材料
2014/06/02 职场文书
市场营销工作计划书
2014/09/15 职场文书
田径运动会通讯稿
2015/07/18 职场文书
《比尾巴》教学反思
2016/02/24 职场文书