通过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 相关文章推荐
html下载本地
Jun 19 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
JavaScript实现音乐导航效果
Nov 19 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/07/15 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php自动加载机制的深入分析
2013/06/08 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
iframe子父页面调用js函数示例
2013/11/07 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JS前端加密算法示例
2016/12/22 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python函数调用追踪实现代码
2020/11/27 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
Internal修饰符有什么含义
2013/07/10 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
出纳岗位职责
2013/11/09 职场文书
上班上网检讨书
2014/01/29 职场文书
煤矿安全协议书
2014/08/20 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
尊师重教主题班会
2015/08/14 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
pycharm代码删除恢复的方法
2021/06/26 Python
Python 语言实现六大查找算法
2021/06/30 Python