通过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 相关文章推荐
二级域名转向类
Nov 09 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php的debug相关函数用法示例
2016/07/11 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
js数组的操作详解
2013/03/27 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
Vue页面骨架屏的实现方法
2018/05/22 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python内置函数及功能简介汇总
2020/10/13 Python
python从Oracle读取数据生成图表
2020/10/14 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
见习期自我鉴定
2014/01/31 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
Python如何加载模型并查看网络
2022/07/15 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技