以上代码为什么不能成功？用到jquery
日期：2014-05-16 浏览次数：20352 次
以下代码为什么不能成功？用到jquery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#span1").left("300px");//我想要span1左边离div左边框300px的距离，但实际上span1紧贴div左边框
//为什么？？？？？
});
</script>
</head>
<body>
<div id="div1" style="width: 500px;height: 100px;border: solid black;position: relative;">
<span id="span1" style="position: relative;">1</span>
</div>
</body>
</html>
------解决方案--------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#span1").left("300px");//我想要span1左边离div左边框300px的距离，但实际上span1紧贴div左边框
//为什么？？？？？
});
</script>
</head>
<body>
<div id="div1" style="width: 500px;height: 100px;border: solid black;position: relative;">
<span id="span1" style="position: relative;">1</span>
</div>
</body>
</html>
------解决方案--------------------
- HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").find("span").each(function(){
$(this).css("left","300px");
});
});
</script>
</head>
<body>
<div id="div1" style="width: 500px;height: 100px;border:1pt solid black;position: relative;">
<span id="span1" style="position: relative;border:1pt solid black;">1</span>
<span id="span2" style="position: relative;border:1pt solid black;">2</span>
<span id="span3" style="position: relative;border:1pt solid black;">3</span>
</div>
</body>
</html>
------解决方案--------------------
- HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#span1").css("margin-left","300px");//注意：设置的是 margin-left
});
</script>
</head>
<body>
<div id="div1" style="width:500px;height:100px;border:1pt solid black;">
<span id="span1" style="border:1px solid #bfbfbf;">1</span>
<span id="span2" style="border:1px solid #bfbfbf;">2</span>
<span id="span3" style="border:1px solid #bfbfbf;">3</span>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
