js动态改变元素属性img标签的src


<head>
<title>
just a test!
</title>
<script type="text/javascript">
/**
* function:when you open the page,get user‘s data from database
*/
function set_follow(){
var count=0;// you should read it from database
document.getElementById("follow_count").innerHTML=count;
}
/**
* function:change the state of follow
* @return {[type]} [description]
*/
function change_follow(){
var follow=document.getElementById("follow");
var follow_count=document.getElementById("follow_count")
var follow_src_path=follow.src;
follow_src_name=follow_src_path.split("/");
if(follow_src_name[follow_src_name.length-1]=="icon_like.png"){//if you dislike it,set "unlike" and follow_count--
follow.src="icon_unlike.png";
follow_count.innerHTML--;
}
else{//if you like it,set "like" and follow_count++
follow.src="icon_like.png";
follow_count.innerHTML++;
}
}
</script>
</head>
<body>
<div >
<ul>
<li><img src="icon_unlike.png" id="follow" onclick="change_follow()">

</img></li>
<li id="follow_count">0</li>
</ul>
</div>
</body>

 
时间: 2024-10-11 11:27:21

js动态改变元素属性img标签的src的相关文章

js动态改变样式属性(style属性)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Style</title> <!-- 之前接触的 行内样式 style 是css设置样式 现在我们使用的是js中的设置样式! --> <style type="text/css"> #myDiv{ height:

js动态改变样式属性(className属性)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>className属性</title> <style type="text/css"> .myDiv{ height: 50px; width: 50px; border: 1px solid red; } .newStyle

jquery获取、改变元素属性值

//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元素属性================================== //返回元素指定属性值 var txt1_val=$("#txt1").attr("value"); //通过元素的DOM属性名更改DOM属性值 $("#txt1").att

js动态改变iframe的高度

js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200" frameborder="0" src="a.htm"〉 〈/iframe〉 而a.html不是固定大小的,这个时候嵌套的iframe就会出现滚动条. 通过js获取iframe的高度,然后动态的改变,这样就不会出现滚动条. 方式一:在jsp的body里增加onload方法

js操作dom元素属性和方法

1.用于处理xml文档的dom元素属性 属性名                      描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSbling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的的元素 2.用于遍历XML文档的dom元素方法 方法名        

Android 动态改变布局属性RelativeLayout.LayoutParams.addRule()

我们知道,在 RelativeLayout 布局中有很多特殊的属性,通常在载入布局之前,在相关的xml文件中进行静态设置即可. 但是,在有些情况下,我们需要动态设置布局的属性,在不同的条件下设置不同的布局排列方式,这时候就需要用到 RelativeLayout.LayoutParams.addRule() 方法,该方法有两种重载方式: addRule(int verb) :用此方法时,所设置节点的属性不能与其它兄弟节点相关联或者属性值为布尔值(布尔值的属性,设置时表示该属性为 true,不设置就

JS动态创建元素的方式

动态创建元素的三种方式: 1.document.write(): a.写在函数里面的话,会冲刷掉之前的页面元素,所以一般不用或是少用: b.会打开document.open()或关闭document.close()文档流: c.文档流: 默认的浏览器的加载顺序是从上往下依次加载的,把当前页面加载完毕之后,就相当于关闭了文档流. 例: <input type="text" value="123"/><input type="button&q

HTML元素 属性 格式化标签

一.HTML元素: 1.元素指的是从开始标签到结束标签的所有代码         <p>This is my web page.</p> 开始标签:<p> 结束标签:</p> 元素内容:This is my web page. 2.HTML元素语法 元素的内容是开始标签与结束标签之间的内容 空元素在开始标签中进行关闭 大多数HTML元素可拥有属性 3.嵌套的HTML元素 大多数HTML元素都是可以嵌套的 二.HTML属性 1.标签可以拥有属性为元素提供更多的

js动态改变图片src在ie6下的兼容问题

场景:验证码图片在ie6下出不来 这个BUG折腾了我近半个小时,最后GOOGLE成功,原因是IE6的底层BUG,我们使用<a>的href属性改变的时候会中断加载,导致我们看不到图片,这经常在验证码或动态改变图片的时候遇到. 所以我们在使用a 链接时通常href和onclick都会同时用到,链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,o