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>

87,996

社区成员

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

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