JS获取id值失败

「已注销」 2019-11-16 06:26:13

是一个web手机端网站，底部导航用的图片，根据图片宽高切割热点区域，但是js有时候获取不到图片的Height值，这样就点不动底部导航了。求指点下。

		<div class="bottom" style="width:100%;margin:0 auto" id="aaa">

			<img src="wode/img/dh4.png" width="100%" border="0" usemap="#planetmap" alt="Planets">

		</div>

		<map name="planetmap" id="planetmap">

		<script>

		var w = document.getElementById("aaa").clientWidth;

		var h = document.getElementById("aaa").clientHeight;

		var mw=w/4;

		document.write("<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>");

		document.write("<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"fenlei.php\"/>");

		document.write("<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>");

		document.write("<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"#\"/>");

		</script>

		</map>
...全文
178 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
kymotz 2019-11-17
  • 打赏
  • 举报
 回复
引用 1 楼 天际的海浪的回复:
你的必须要等图片加载完成才能获取其高度啊 

		<div class="bottom" style="width:100%;margin:0 auto" id="aaa">
			<img src="wode/img/dh4.png" width="100%" border="0" usemap="#planetmap" alt="Planets">
		</div>
		<map name="planetmap" id="planetmap">
		</map>
		<script>
		window.onload = function () {
			var w = document.getElementById("aaa").clientWidth;
			var h = document.getElementById("aaa").clientHeight;
			var mw=w/4;
			var str = "<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"fenlei.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"#\"/>";
			document.getElementById("planetmap").innerHTML = str;
		}
		</script>
使用css设置背景会预加载解析
「已注销」 2019-11-16
  • 打赏
  • 举报
 回复
引用 1 楼 天际的海浪 的回复:
你的必须要等图片加载完成才能获取其高度啊 

		<div class="bottom" style="width:100%;margin:0 auto" id="aaa">
			<img src="wode/img/dh4.png" width="100%" border="0" usemap="#planetmap" alt="Planets">
		</div>
		<map name="planetmap" id="planetmap">
		</map>
		<script>
		window.onload = function () {
			var w = document.getElementById("aaa").clientWidth;
			var h = document.getElementById("aaa").clientHeight;
			var mw=w/4;
			var str = "<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"fenlei.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"#\"/>";
			document.getElementById("planetmap").innerHTML = str;
		}
		</script>
还有个问题，其中有个页面是分类信息，在谷歌显示正常，但在手机上面图片不显示，点击分类商品也不会根据分类id上下调动，有php代码动态加载数据库的数据、 
<?php
//ini_set( "error_reporting", "E_ALL & ~E_NOTICE"); 
header( "Access-Control-Allow-Origin: *"); //跨域 
include( "./fenlei/php/getsj.php"); 
$flsj=Get_fenlei(); //获取分类数据
function fenlei_as($arr){
	$strtr="";
	for($e=0;$e<10;$e++){
		if($arr[$e][0]["ok"]==1){
			$strtr=$strtr."<div class=\"menuItem\" category=\"".$arr[$e][0]["title"]."\" statisticEvent=\"click\" statistic=\'{\"data\":{\"uu\":\"\",\"uc\":\"0\"},\"route\":\"click\"}\'>".$arr[$e][0]["title"]."</div>";
		}
	}
	return $strtr;
}
function fenlei_bs($arr){
	$strtr="";
	$dx=0;
	for($e=0;$e<10;$e++){
		if($arr[$e][0]["ok"]==1){
			$strtr=$strtr."<div class=\"categoryList\" category=\"".$arr[$e][0]["title"]."\"><div class=\"title\">".$arr[$e][0]["title"]."</div>";
			$dx=count($arr[$e]);
			if($dx>1){
				for($y=1;$y<$dx;$y++){
					$strtr=$strtr."<div class=\"categoryItem\" onclick=\"window.open('./spxqy.php?id=".$arr[$e][$y]["id"]."')\" data-url=\"/category/detail/0\" data-seccategory=\"-1\">";
					$strtr=$strtr."<div class=\"categoryIcon lazyLoad\" data-original=\"".$arr[$e][$y]["imgurl"]."\"></div><div class=\"cursorArea\"></div>";
					$strtr=$strtr."<span class=\"text\">".$arr[$e][$y]["title"]."</span><span class=\"text\" color=\"#FF0000\">￥".$arr[$e][$y]["jiage"]."</span></div>";
				}
			}
			$strtr=$strtr."</div>";
		}
	}
	return $strtr;
}
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<meta http-equiv="x-dns-prefetch-control" content="on" />
		<link href="fenlei/css/flaa.css" type="text/css" rel="stylesheet" />
		<title>分类</title>
		<style type="text/css">
			body {
				font-size: 12px;
				margin: 0;
				padding: 0;
				font-family: Microsoft Yahei, Arial, Simsun, Helvetica, Segoe UI, sans-serif;
			}
		</style>
		<script type="text/javascript" src="fenlei/js/zepto.js"></script>
		<script type="text/javascript" src="fenlei/js/aax.js"></script>
		<script type="text/javascript" src="fenlei/js/zepto.picLazyLoad.min.js"></script>
	</head>
	<body>
	<div id="contentbox">
		<div class="menu">
			<?php
			echo fenlei_as($flsj);
			?>
		</div>
		<div class="categoryBox">
			<div class="categoryContent">
				<?php
				echo fenlei_bs($flsj);
				?>
			</div>
		</div>
	</div>
	<div class="bottom" style="width:100%;margin:0 auto" id="aaa"><img src="fenlei/img/dh2.png" width="100%" border="0" usemap="#planetmap" alt="Planets"></div>
	<map name="planetmap" id="planetmap">
	</map>
	<script>
	window.onload = function () {
	    var w = document.getElementById("aaa").clientWidth;
	    var h = document.getElementById("aaa").clientHeight;
	    var mw=w/4;
	    var str = "<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>"
	    + "<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"#\"/>"
	    + "<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>"
	    + "<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"wode.php\"/>";
	    document.getElementById("planetmap").innerHTML = str;
	}
	</script>
	</body>
</html>
天际的海浪 2019-11-16
  • 打赏
  • 举报
 回复
你的必须要等图片加载完成才能获取其高度啊 

		<div class="bottom" style="width:100%;margin:0 auto" id="aaa">
			<img src="wode/img/dh4.png" width="100%" border="0" usemap="#planetmap" alt="Planets">
		</div>
		<map name="planetmap" id="planetmap">
		</map>
		<script>
		window.onload = function () {
			var w = document.getElementById("aaa").clientWidth;
			var h = document.getElementById("aaa").clientHeight;
			var mw=w/4;
			var str = "<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"fenlei.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>"
			+ "<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"#\"/>";
			document.getElementById("planetmap").innerHTML = str;
		}
		</script>
利用JavaScript获取值失败问题
今天写了个简单的小李子，结果获取值时显示 [object HTMLInputElement] 源代码 错误点在定义变量x获取表单值，改成： var x = document.form1.x.value就可以啦
响应id事件js和js获取input输入值及ajax的data、error属性解释
先上解释：① $("#xxx").click(function(){ ... } );  : xxx为id的值    $("#xxx").val() : 获取input框的输入值② data: 就算为空也要传{}             { name2:name,password2:password } : name 为js获取到的值，name2为后台方法中对应的值，获取方式login(HttpS...
页面JS获取不到控件ID
为了使页面更加的友好，我们不可避免的要在页面上使用JS，所以在页面上使用javascript获取控件ID是很常见的事情。但是最近在使用JS的使用，遇到了一件让我很头疼的事情，在获取控件ID时，抱错了，监控显示，获取不到控件ID。
js-Promise.all其中一个失败如何获取其他值
hello~同学们好,今天分享一个js的Promise.all(), 当其中一个为失败状态如何正常获取其他值的小技巧. 这是原来的代码段,可以看到 使用Promise.all 发送了3个携带id的请求. // 使用Promise.all 其中id为69的商品,返回失败,会导致整个Promise接受到reject状态. // 所以进行改造, p catch 得到的err 为返回失败抛出的信息, 进行置空 P
Jquery中获取对应含有括号的id的值失败
近日在实际项目开发中需要把表的id作为input的id，恰巧数据库中的id格式为XXXXXXX(XXXXXXX)，意思为大id包含小id。 可在获取对应的input的值时总是提示undifind。 经过查找资料后发现，jQuery中的id选择器只能匹配包括，英文、数字、下划线、中划线。JQuery中的1.2.6版本至1.3.2版本都有这种情况，所以修改数据库id的拼接方式，把左右括号改为下划线...
JavaScript

87,996

社区成员

224,708

社区内容

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

加载中

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

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

+ 用AI写文章