JS动态给字符串/div添加样式与样式名
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 我们在各种WEB前段时都会要碰到动态的去修改div或文本的样式，下面我来给大家总结了几种常用的动态给字符串/div添加样式与样式名实例，希望此方法对各位会有所帮助。...
|
最初级的给字符串增加样式
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
var txt="Hello World!"
var txt="Nice to meet you !";
//原大小
document.write("<p>"+txt+"</p>");
//变大
document.write("<p>big:"+txt.big()+"</p>");
//变小
document.write("<p>small:"+txt.small()+"</p>");
//轮廓清晰的
document.write("<p>Bold:"+txt.bold()+"</p>");
//斜体;斜体字
document.write("<p>Italic:"+txt.italics()+"</p>");
//闪亮,闪烁
document.write("<p>Blink:"+txt.blink()+"(does not work in IE)</p>");
//固定的
document.write("<p>Fixed:"+txt.fixed()+"</p>");
//中划线
document.write("<p>Strike:"+txt.strike()+"</p>");
//font 字型字体
document.write("<p>Fontcolor:"+txt.fontcolor("red")+"（默认为绿色）</p>");
//字体大小
document.write("<p>Fontsize:"+txt.fontsize(16)+"</p>");
//变小写
document.write("<p>toLowerCase:"+txt.toLowerCase()+"</p>");
//变大写
document.write("<p>toUpperCase:"+txt.toUpperCase()+"</p>");
//下面的
document.write("<p>Subscript: " + txt.sub() + "</p>")
//上面的
document.write("<p>Superscript: " + txt.sup() + "</p>")
//超链接。红色下划线
document.write("<p>Link: " + txt.link("http://www.111cn.net") + "</p>")
</script>
|
上面的方法只是一个超级简单并且维护不方便的给文本增加样式的实例了，下面才是我们要讲到的
一、
| 代码如下 |
复制代码 |
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>
|
追加样式
| 代码如下 |
复制代码 |
|
<style>
.another{
Font-style:italic; /* 斜体 */
Color：blue；} /* 字体设为蓝色 */
</style>
|
例
| 代码如下 |
复制代码 |
|
<ul>
<li><a onclick="ajaxgetlist(1);" href="javascript:void(0);" class="mainfhove" id="page1">1</a></li>
<li><a onclick="ajaxgetlist(2);" href="javascript:void(0);" class="" id="page2">2</a></li>
<li><a onclick="ajaxgetlist(3);" href="javascript:void(0);" class="" id="page3">3</a></li>
<li><a onclick="ajaxgetlist(4);" href="javascript:void(0);" class="" id="page4">4</a></li>
<li><a onclick="ajaxgetlist(5);" href="javascript:void(0);" class="" id="page5">5</a></li>
<li><a onclick="ajaxgetlist(6);" href="javascript:void(0);" class="" id="page6">6</a></li>
</ul>
<script language="javascript">
//动态调商品展示列表
function ajaxgetlist(page)
{
for(i = 1; i <= 6 ; i++)
{
if (i == page)
{
$("#page"+page).addClass("mainfhove");
}
else
{
$("#page"+i)[0].className = "";
}
}
}
</script>
|
|
