js获取不到IMG标签的title属性值？？？

qingYun1029 2011-01-05 10:50:28
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

	*{

		font-size:12px;

		}

		

	#scores div{

		line-height:18px;

		vertical-align:middle;		

		}

	

	#scores img{

		display:block;

		float:left;

		}

			

	#scores div{

		margin:12px 0;

		}

	

	#scores img{

		padding:0 3px;

		}

	

	.disMessage{

		clear:right;

		}

</style>

</head>



<body>

<div id="scores">

<div id="service" onmouseout="OnMouOut(this)"><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="1" title="服务态度极其恶劣，完全不顾用户感受！" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="2" title="ccc" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="3" title="bbb"  /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="4" title="ddd" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="5" title="eee" /><div class="disMessage"> </div></div>





<div id="price" onmouseout="OnMouOut(this)"><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="1" title="第二行aaa" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="2" title="第二行bbb" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="3"  title="第二行ccc" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="4" title="第二行ddd" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="5" title="第二行eee" /><div class="disMessage"> </div></div>



<div id="carState" onmouseout="OnMouOut(this)"><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="1" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="2" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="3"  /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="4" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="5" /><div class="disMessage"> </div></div>



<div id="carModel" onmouseout="OnMouOut(this)"><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="1" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="2" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="3"  /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="4" /><img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="5" /><div class="disMessage"> </div></div>



</div>



</body>

</html>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>        

<script type="text/javascript">

	//获取id为scores的div下的所有IMG标签，并为其添加图片路径

	function ImgSetPath(){

		//获取id为scores的div下的所有IMG标签

		var imgArr = document.getElementById("scores").getElementsByTagName("img");

		//赋值

		for(var i = 0; i < imgArr.length; i++){

			imgArr[i].src = "star_white.gif";

		}

	}

	

	//加载事件

	window.onload = ImgSetPath;

	

	//设置每种评论所选的初始值

	window.parent.service = 0;

	window.parent.price = 0;

	window.parent.carState = 0;

	window.parent.carModel = 0;

	//每个评论（星星）按钮的单击事件

	//e——事件源（被单击的"星星"）

	function OnCli(e){

		//事件源的父标签

		var objSenPriend = e.parentNode;

		//事件源的所有兄弟节点（包含事件源）

		var tempObj = objSenPriend.childNodes;

		

		var score = e.alt;//用户所评的分数

		for(var i = 0; i < score; i++){

			if(score <= 2){

				tempObj[i].src = "star_gray.gif";

			}else if(score > 2){

				tempObj[i].src = "star_yellow.gif";

			}

		}

	

		

		//保存用户对对应项目所评的分数

		switch(e.parentNode.id){

			case "service":

				window.parent.service = e.alt;	

				break;

			case "price":				

				window.parent.price = e.alt;	

				break;

			case "carState":

				window.parent.carState = e.alt;	

				break;

			case "carModel":

				window.parent.carModel = e.alt;	

				break;

			default:

				break;

		}		

		objSenPriend.lastChild.innerHTML = objSenPriend.id+","+e.title+","+e.alt;

		alert(typeof(e.title)+e.title);

	}

	

	

	//鼠标移上事件，里面的执行程序和上面的单击事件差不多。。

	function OnMouOver(e){

		var objSen = e;

		var objSenPriend = e.parentNode;

		var tempObj = objSenPriend.childNodes;

		

		//将对应项目下的所有可选评分设置为默认状态

		for(var i = 0; i < tempObj.length; i++){

			tempObj[i].src = "star_white.gif";

		}

		

		//根据条件对对应的评分项目设置背景颜色。

		for(var i = 0; i < objSen.alt; i++){

			if(objSen.alt <= 2){

				tempObj[i].src = "star_gray.gif";

			}else if(objSen.alt > 2){

				tempObj[i].src = "star_yellow.gif";

			}

		}

	}

	

	//鼠标移去事件

	function OnMouOut(e){

		//用户所选分数

		var commScore;

		//根据事件源id，获取用户对该项的评分。

		switch(e.id){

			case "service":

				commScore = window.parent.service;	

				break;

			case "price":

				commScore = window.parent.price;	

				break;

			case "carState":

				commScore = window.parent.carState;

				break;

			case "carModel":

				commScore = window.parent.carModel;

				break;

			default:

				break;

		}

		

		//当属便移开是，将对应项目的所有可选评分设置为默认状态

		var tempObj = e.childNodes;

		for(var i = 0; i < tempObj.length; i++){

			tempObj[i].src = "star_white.gif";

		}

		

		//还原用户所选评分。

		if(commScore >= 1){						

			if(commScore <= 2){

				for(var i = 0; i < commScore; i++){

					if(tempObj[i] != null){

						tempObj[i].src = "star_gray.gif";		

					}

				}

			}else if(commScore > 2){

				for(var i = 0; i < commScore; i++){

					if(tempObj[i] != null){

						tempObj[i].src = "star_yellow.gif";							

					}

				}

			}			

		}		

	}

	

	$(document).ready(function()

	{              

		$('#scores img[title]').qtip({                   

			content:{

				text: false

			},   

				style: 'cream'

		}); 

	});

</script>

效果图：


...全文
2071 35 打赏 收藏 转发到动态 举报
写回复
用AI写文章
35 条回复
切换为时间正序
请发表友善的回复…
发表回复
刘尧涛 2011-07-09
  • 打赏
  • 举报
 回复
其实 你讨论了半天 我只想知道 Img 到底有没有 title属性 因为我想加上tilte做优化用
Quinn2 2011-01-05
  • 打赏
  • 举报
 回复
<img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="1" title="第二行aaa" />这图片上面有，所以后面可以获取到

<img onclick="OnCli(this)" onmouseover="OnMouOver(this)" alt="4" />这图上没看见title，肯定没发获取，

调用方法的时候
objSenPriend.lastChild.innerHTML = objSenPriend.id + "," + e.title + "," + e.alt;
alert(typeof (e.title) + e.title);这里的title肯定是空的，当前对象，没有 title属性
Quinn2 2011-01-05
  • 打赏
  • 举报
 回复
属性是添加了，但是属性上面没值，如果title="具体的值"；那么你就可以获取到了。问题肯定出在这。
86y 2011-01-05
  • 打赏
  • 举报
 回复
应该是没有值所以获取不到。
Mr-Jee 2011-01-05
  • 打赏
  • 举报
 回复
e["title"]呢？
$(e).attr('title')呢
qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 ibm_hoojo 的回复:]

引用 3 楼 hb_yanhu 的回复:

楼主
图片没有title这个属性，所有值为空！

+
CSS code

e.title = !e.title ? "default" : e.title;
objSenPriend.lastChild.innerHTML = objSenPriend.id+","+e.title+","+e.alt;
[/Quote]

这样也不行啊，我已经为图片添加了title属性，但是获取到的值还是default。。
这个效果还是没有实现。。

我想还是用了jquery库的原因，刚才我试了一下，title值获取到了，不过加载的时候会报一个错误。。
qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 hb_yanhu 的回复:]

必须跟图片加上这个属性，才能操作它。
[/Quote]

我已经为图片添加了title属性。。
hoojo 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 hb_yanhu 的回复:]

楼主
图片没有title这个属性，所有值为空！
[/Quote]
+


e.title = !e.title ? "default" : e.title;

objSenPriend.lastChild.innerHTML = objSenPriend.id+","+e.title+","+e.alt;
Quinn2 2011-01-05
  • 打赏
  • 举报
 回复
必须跟图片加上这个属性，才能操作它。
Quinn2 2011-01-05
  • 打赏
  • 举报
 回复
楼主
图片没有title这个属性，所有值为空！
Quinn2 2011-01-05
  • 打赏
  • 举报
 回复
//点击图片的时候
$("#tu").click(function () {
//获取对于的title值；
alert($(this)[0].title);
});
qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
上面每个星星都是一个图片，都设置了alt、title属性值。。。

要求，当点击不同的星星时，将星星图片的title属性值显示在后面。。。

目前，星星的alt属性值取出来了，但是title属性值取出来却为空（用typeof(e.title)试了一下，是string类型）？？

里面我用到了jquery库。。。

请帮帮忙，谢谢了！！！
qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 33 楼 daxiongshishen 的回复:]

学习 下。
[/Quote]

终于等到一个人来了，不然我说话的权利都没有了。。
daxiongshishen 2011-01-05
  • 打赏
  • 举报
 回复
学习 下。
qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
没有办法了吗？？
qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 29 楼 cj205 的回复:]

e.title ==> e["title"]

你别改代码了

直接用上面的替换吧
[/Quote]

被替换掉的地方只有一处。不好意思，还是让你失望了。。
又没有获取到。。
qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 29 楼 cj205 的回复:]

e.title ==> e["title"]

你别改代码了

直接用上面的替换吧
[/Quote]

好的，我试试。。
Mr-Jee 2011-01-05
  • 打赏
  • 举报
 回复
e.title ==> e["title"]

你别改代码了

直接用上面的替换吧

qingYun1029 2011-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 27 楼 cj205 的回复:]

$(document).ready(function(){
ImgSetPath();
});
[/Quote]

错误消失了，但是e.title值也消失了，还是没有获取到title值！！！
Mr-Jee 2011-01-05
  • 打赏
  • 举报
 回复
$(document).ready(function(){
ImgSetPath();
});
加载更多回复（15）
HTML+CSS+JavaScript
一、网页设计与策划01 网页与网站的概念02 网页核心技术(HTML/CSS/JAVASCRIPT)简介03 什么是HTML04 什么是CSS05 什么是JavaScript06 网页的设计流程07 HTML5概述、浏览器及内核08 编写第一个HTML页面09 HTML页面基本...
关于img标签中的alt和title属性作用的说明
在img标签中有title和alt两个属性值。 其中alt属性是指图片的替换文本，主要有两个作用： ①当根据路径找不到该图片时,作为替换文本出现,不同的浏览器显示形式不一样。 ②通过alt 可以让搜索引擎知道该图片的内容...
vue设置img大小的属性_Vue.js自定义标签属性并获取属性，及绑定img的src属性的坑...
一、定义属性：一般定义属性都是为了动态的去获取属性的值，或者动态的设置属性的值，如果想仅仅是设置一个普通的属性，直接在便签上设置属性即可，就像使用html的title、name等属性一样，如H1标签。下面具体说动态...
img的alt属性是规范中的可选属性？如何统一设置img 标签的alt属性
一个老项目上线挺久了，leader突然说项目代码中的img标签的没有写alt属性且没附上合理的值，要全部补上，不上值是可以的，但个性化合理性的给每个img标签的alt属性附上不同的合理值就很麻烦了，最终经过一番讨...
java 获取html的title_javascript如何获取网页的标题（title）？
如果想要获取网页的标题(title)，其实就是获取标签中的内容。下面本篇文章就来给大家介绍一下获取方法，希望对大家有所帮助。方法一：使用title属性title 属性可返回当前文档的标题( HTML title 元素中的文本)。语法...
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章