<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>main.html</title>
<style type="text/css">
div.left_topnext2 {
background: url(r1.png) 0px 4px no-repeat
height: 20px
line-height: 20px
}
div.left_topnext2 a {
padding-left: 16px
}
</style>
<script type="text/javascript">
onload = function ()
{
var divs = document.getElementsByTagName('div')
for ( var i = 0 i < divs.length i++)
{
var me = divs[i]
me.clicked = 0
if (me.className == 'left_topnext2')
{
me.onclick = function ()
{
me.style.backgroundImage = me.clicked == 0 ? 'url(r2.png)' : 'url(r1.png)'
me.clicked = me.clicked == 1 ? 0 : 1
}
}
}
}
</script>
</head>
<body>
<div class="left_topnext2">
<a href="#">专题报道</a>
</div>
</body>
</html>
可以用定位来实现这种按钮，参考如下：style部分参考如下:
.search { position:relativewidth: 462px}
.search .searchText { border: 1px solid #dddwidth: 346pxline-height: 32pxheight: 32pxpadding: 0 5pxcolor: #333}
.search .searchButton { position:absoluteright:50pxbackground: url(../images/sliced.gif) -251px 0 no-repeatwidth: 80pxheight: 32px text-indent: -9999pxborder:none}
html部分参考如下:
<div class="search fl">
<form action="#">
<input class="searchText" type="text" value="请输入搜索关键字" onfocus="if(this.value=='请输入搜索关键字')this.value=''" onblur="if(this.value=='')this.value='请输入搜索关键字'"/>
<input class="searchButton" type="button" value="搜索" />
</form>
<div class="clear"></div>
</div>
对按钮添加个onclick事件就行了，下面是个案例。
<div id="box"></div><button onclick="addContent()">按钮</button>
<script>
function addContent(){
var oDiv=document.getElementById("box")
oDiv.innerHTML="这是添加的文字"
//oDiv.innerHTML='<img src="1.min.jpg"/>' //添加图片
}
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）