有一段javascript唯独不能在firefox中运行
内容为两个设置了宽、高、背景色的div。下面有两个下拉选择列表。第一个可选div的id，第二个可选三个属性名中的一个。选好后点击按钮，弹出该div的该属性的属性值。在fi...
内容为两个设置了宽、高、背景色的div。
下面有两个下拉选择列表。
第一个可选div的id，第二个可选三个属性名中的一个。
选好后点击按钮，弹出该div的该属性的属性值。
在firefox中，宽和高都能正常弹出，但background-color就会弹出undefined。
代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0022)http://blog.csdn.net/electroniXtar/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
</script>
</head>
<body>
<div id="div1" style="width:200px;height:300px;background-color:green;">div1<br />width:200px<br />height:300px<br />background-color:green</div>
<div id="div2" style="width:400px;height:100px;background-color:red;">div2<br />width:400px<br />height:100px<br />background-color:red</div>
ID<select id="selectID" onchange="changeID()">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<input type="hidden" id="ID2" value="div1" />
属性<select id="selectSX" onchange="changeSX()">
<option value="width">width</option>
<option value="height">height</option>
<option value="background-color">background-color</option>
</select>
<input type="hidden" id="SX2" value="width" />
<input type="button" onclick="test()" value="查询" />
</body>
<script type="text/javascript">
function test()
{
var sName=document.getElementById("ID2").value;
var sShu=document.getElementById("SX2").value;
var sSize=document.getElementById(sName).style[sShu];
alert(sSize);
}
function changeID()
{
document.getElementById("ID2").value=document.getElementById("selectID").value;
}
function changeSX()
{
document.getElementById("SX2").value=document.getElementById("selectSX").value;
}
</script>
</html> 展开
下面有两个下拉选择列表。
第一个可选div的id，第二个可选三个属性名中的一个。
选好后点击按钮，弹出该div的该属性的属性值。
在firefox中，宽和高都能正常弹出，但background-color就会弹出undefined。
代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0022)http://blog.csdn.net/electroniXtar/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
</script>
</head>
<body>
<div id="div1" style="width:200px;height:300px;background-color:green;">div1<br />width:200px<br />height:300px<br />background-color:green</div>
<div id="div2" style="width:400px;height:100px;background-color:red;">div2<br />width:400px<br />height:100px<br />background-color:red</div>
ID<select id="selectID" onchange="changeID()">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<input type="hidden" id="ID2" value="div1" />
属性<select id="selectSX" onchange="changeSX()">
<option value="width">width</option>
<option value="height">height</option>
<option value="background-color">background-color</option>
</select>
<input type="hidden" id="SX2" value="width" />
<input type="button" onclick="test()" value="查询" />
</body>
<script type="text/javascript">
function test()
{
var sName=document.getElementById("ID2").value;
var sShu=document.getElementById("SX2").value;
var sSize=document.getElementById(sName).style[sShu];
alert(sSize);
}
function changeID()
{
document.getElementById("ID2").value=document.getElementById("selectID").value;
}
function changeSX()
{
document.getElementById("SX2").value=document.getElementById("selectSX").value;
}
</script>
</html> 展开
2个回答
展开全部
尊敬的用户，您好！很高兴为您答疑。
请将<option value="background-color">background-color</option>
改为
<option value="backgroundColor">background-color</option>
之后再试一试。原理请参阅：CSS background-color 属性。（留意transparent 值）那一段说明。
希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
</style>
<script type="text/javascript">
function test ()
{
var sName = ID2.value;
var sShu = SX2.value;
var reg = /^([^\-]+)\-([^\-])([^\-]*)$/;
sShu.match (reg);
var temp = sShu.replace (reg, "$1" + RegExp.$2.toUpperCase () + "$3");
var sSize = document.getElementById (sName).style[temp];
alert (sSize);
}
function changeID ()
{
ID2.value = selectID.value;
}
function changeSX ()
{
SX2.value = selectSX.value;
}
</script>
</head>
<body>
<div id="div1" style="width: 200px; height: 300px; background-color: green;">
div1<br />width:200px<br />height:300px<br />background-color:green
</div>
<div id="div2" style="width: 400px; height: 100px; background-color: red;">
div2<br />width:400px<br />height:100px<br />background-color:red
</div>
ID
<select id="selectID" onchange="changeID()">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<input type="hidden" id="ID2" value="div1" /> 属性
<select id="selectSX" onchange="changeSX()">
<option value="width">width</option>
<option value="height">height</option>
<option value="background-color">background-color</option>
</select>
<input type="hidden" id="SX2" value="width" />
<input type="button" onclick="test()" value="查询" />
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
