通过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 相关文章推荐
使用jquery实现简单的ajax
Jul 08 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
js仿京东放大镜效果
Aug 09 Javascript
详解Vue中的自定义指令
Dec 07 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
PHP 输出简单动态WAP页面
2009/06/09 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
生产部统计员岗位职责
2014/01/05 职场文书
主题党日活动总结
2014/07/08 职场文书
物业消防安全责任书
2014/07/23 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技