JS动态给字符串/div添加样式与样式名
最初级的给字符串增加样式
代码如下 | |
<script type="text/javascript"> var txt="Nice to meet you !"; |
上面的方法只是一个超级简单并且维护不方便的给文本增加样式的实例了,下面才是我们要讲到的
一、
代码如下 | |
function addclass(elm,newclass){ var c = elm.className; if(c!="") elm.className=newclass; } |
写个函数然后传入对象元素跟样式名字,判定是否为空,如果不为空就赋值样式名字;
二、
代码如下 | |
function addclass(elm,newclass){ var c = elm.className; elm.className = (c =="") ? newclass : c+' '+newclass; } |
写个函数然后传入对象元素跟需要添加到样式名字,判定是否为空,如果为空就赋值,否则就加个空格再赋值;
三、
代码如下 | |
function addclass(elm,newclass){ var classes = elm.className.split(' '); classes.push(newclass); elm.className = classes.join(' '); } |
传入对象元素跟样式名字,然后把elm.className看成用“ ”(空格)分割的字符串,用split去除空格变成数组,然后用push方法添加样式到数组中,用join添加空格变成字符串再赋值给元素的class,很独特很棒的方法。
然而,我觉得有点不足,假如元素本来就有newclass这类名,那怎么办?就像这样:
<div class="div1 div2">
然后我想添加个div2类给这个div,如果用第三种方法,虽然不会出错,但页面显示会变成这样<div class="div1 div2 div2">,于是我用第四种方法:
四、
代码如下 | |
function zhen(obj,claName){ var cla=obj.className.split(" "); for(var i=0;i<cla.length;i++) { if(cla[i]==claName) return; } cla.push(claName); obj.className=cla.join(" "); } |
继承第三种方法的优势,在其基础上做了个循环判定,保证没有重复的名字存在。
现在如果你使用jquery那么上面的方法都己经弱爆了,下面我来给大家介绍jquery动态给css增加样式吧。
jquery动态增加样式
代码如下 | |
<p class=”myclass” title=”选择喜欢的水果”>你最喜欢的水果是?<p> |
在上面代码中,class也是p元素的属性,因此获取class和设置class都可以用attr()方法来完成
代码如下:
Var p_class=$(“p”).attr(“class”); //获取p元素的class
也可以用attr()方法来设置class
代码如下 | |
$(“p”).attr(“class”,”high”); //将p元素的class设置为high |
在大多数情况下,它是将原来的class替换成新的class,而不是在原来基础上追加新的class
新的代码为
代码如下 | |
<p class=”high” title=”选择喜欢的水果”>你最喜欢的水果是?<p> |
追加样式
代码如下 | |
.another{ Font-style:italic; /* 斜体 */ Color:blue;} /* 字体设为蓝色 */ </style> |
例
代码如下 | |
<ul> <script language="javascript"> </script> |