通过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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 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的计数器程序
2006/10/09 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
自制PHP框架之设计模式
2017/05/07 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
详解Python模块化编程与装饰器
2021/01/16 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
京剧自荐信
2014/01/26 职场文书
保护水资源的标语
2014/06/17 职场文书
校庆标语集锦
2014/06/25 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
仓管员岗位职责
2015/02/03 职场文书
云冈石窟导游词
2015/02/04 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书