Js控制css样式(展开收起为例)

1.JQUERY控制CSS样式:

页面部分:指定ID,指定触发事件

<div id=”img1″ style=”width:500px;float:left;” class=”infonav infonav_hidden”>

              <p>文章标题</p>

              <p>1.文章标题一。</p>

              <p>2.文章标题二。</p>

              <p>3.文章标题三。</p>

 </div>

<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”>

<a  border=”0″ style=”border:none;” href=”javascript:” onclick=”infonav_more_down(0);return false;”><img src=”list1.png”></a>

 </div>

jquery部分:

<script type=”text/javascript” src=”jquery-1.4.min.js” charset=”UTF-8″></script>

<script type=”text/javascript” charset=”UTF-8″>

//点击效果实现展开

function infonav_more_down(index)

{

var inHeight = ($(“#img1”).eq(index).find(“p”).length)*100;//设置要展开后显示的高度,100是可调数字。

if(inHeight > 65)

{

$(“#img1”).eq(index).css({height:inHeight});

$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:360px;”><a onclick=”infonav_more_up(” index “);return false;” href=”javascript:”><img src=”list2.png”></a></div>”);

}

else

{

return false;

}

}

//点击效果实现收起

function infonav_more_up(index)

{

var infonav_height = 65;//设置要收起后显示的高度,15是可调数字。

$(“#img1”).eq(index).css({height:infonav_height});

$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”><a onclick=”infonav_more_down(” index “);return false;” href=”javascript:”><img src=”list1.png”></a></div>”);

}

</script>

//===

addClass() 方法向被选元素添加一个或多个类。
$(selector).addClass(class)
removeClass() 方法从被选元素移除一个或多个类。
$(selector).removeClass(class)
hasClass() 方法检查被选元素是否包含指定的 class。
$(selector).hasClass(class)
find() 再次定位或查找指定元素(含)
.find(class)
attr() 方法设置或返回被选元素的属性值。
$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr(attribute,function(index,oldvalue))

 

//===

2.Javascript控制CSS样式:

页面部分:指定ID,指定触发事件

<div id=”img5″ class=”show_brand” style=”display: block;” onclick=”b();”></div>

<div id=”img6″ class=”hide_brand” style=”display: none;” onclick=”a();”></div>

javascript部分:

/* js写法:paddingTop ,css写法:padding-top*/

<script>

function a()

{

document.getElementById(“img1″).style.overflow=”hidden”;

document.getElementById(“img2″).style.paddingTop=”75px”;

document.getElementById(“img5″).style.display=”block”;

document.getElementById(“img6″).style.display=”none”;

}

function b()

{

document.getElementById(“img5″).style.display=”none”;

document.getElementById(“img6″).style.display=”block”;

document.getElementById(“img2″).className=”text”;

}

</script>

<style type=”text/css”>

.text{
position:absolute;
left:700px;
bottom:1px;
}

</style>