通过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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
webpack入门必知必会
Jan 16 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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
对javascript和select部件的结合运用
2006/10/09 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
node网页分段渲染详解
2016/09/05 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
Python学习小技巧总结
2018/06/10 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
2014教师年度思想工作总结
2014/11/10 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
工作失误检讨书
2015/01/26 职场文书
小学教师节活动总结
2015/03/20 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript