通过js为元素添加多项样式,浏览器全兼容写法

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下 ^_^

赞 (0)

相关推荐

  • 再谈javascript 动态添加样式规则 W3C校检

    毫无疑问,基于表现与结构相分离的原则,直接导入一个新的样式表是最好的选择,但有些情况就行不通,如我们做一个能拖动的DIV,从设置样式的角度看,就是把它绝对定位,以防影响原来的文档流,然后一点点改变其top与left的值实现移动的效果.由于拖动是有时间概念的,一秒24帧,样式表不可能面面俱到都把它们写进去.因此动态生成样式规则与快速修改样式规则是非常有必要的,W3C为此做了大量的工作,在DOM2.0中,扩充了不少接口. 退一步说,表现与结构相分离也不止导入样式表这一条路.要知道,一共有三种样式类型

  • JS函数实现动态添加CSS样式表文件

    先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • JavaScript动态添加css样式和script标签

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s

  • javascript动态添加样式(行内式/嵌入式/外链式等规则)

    添加CSS的方式有行内式.嵌入式.外链式.导入式 a)动态引入样式表文件: 复制代码 代码如下: function loadLink(url){ var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; var head = document.getElmentsByTagName(&qu

  • Javascript 检测、添加、移除样式(className)函数代码

    复制代码 代码如下: <script type="text/javascript"> // 说明:添加.移除.检测 className function hasClass(element, className) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); return element.className.match(reg); } function addClass(element, className) {

  • JavaScript CSS修改学习第五章 给“上传”添加样式

    JavaScript CSS修改学习第五章 给“上传”添加样式

    问题 在一个网站中可能我的输入框式下面这样的:  设计者可能想让上传部分也像这样然后再添加一个select按钮.但是当我想把普通的输入框改为上传框时就根本不能工作.浏览器之间有很大的不同,给默认按钮添加样式也几乎不可能. 这很难成为设计的很好的上传框,但是也是我们能做的最多的了. 注意到Safari的设计有些不同.Safari小组想关闭手动输入文件的功能,可能担心这样的溢出.这样设计有个缺点就是用户在选择了一个文件之后不能取消上传文件. 解决办法 读者Michael McGrady发明了一个不错

  • 通过js为元素添加多项样式,浏览器全兼容写法

    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(oldS

  • js获取元素的外链样式的简单实现方法

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样

  • vue中v-for循环选中点击的元素并对该元素添加样式操作

    相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: <div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'> <span>{{item.name}}</

  • jQuery使用after()方法在元素后面添加多项内容的方法

    本文实例讲述了jQuery使用after()方法在元素后面添加多项内容的方法.分享给大家供大家参考.具体分析如下: jQuery可通过after()方法在元素后面添加多项内容,after()可以带多个参数,在指定元素后面添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function af

  • jQuery使用append在html元素后同时添加多项内容的方法

    本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法.分享给大家供大家参考.具体分析如下: 下面的代码可以同时在文本段落后添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function appendText() { var txt1="<p&g

  • jQuery给元素添加样式的方法详解

    本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl

  • jQuery给多个不同元素添加class样式的方法

    本文实例讲述了jQuery给多个不同元素添加class样式的方法.分享给大家供大家参考.具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){

  • jQuery使用addClass()方法给元素添加多个class样式

    本文实例讲述了jQuery使用addClass()方法给元素添加多个class样式的方法.分享给大家供大家参考.具体如下: jQuery通过addClass()方法给元素添加多个class,只需要在添加的class中用空格分开多个class既可 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(doc

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

随机推荐