通过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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
原生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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
Open and Print a Word Document
2007/06/15 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue实现计算器功能
2020/02/22 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
在Python中处理XML的教程
2015/04/29 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
幼儿教师国培感言
2014/02/19 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
施工协议书范本
2014/04/22 职场文书
怀念母亲教学反思
2014/04/28 职场文书
红色故事演讲稿
2014/05/22 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
2015大学生求职信范文
2015/03/20 职场文书
学校教师培训工作总结
2015/10/14 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技