以下代码为什么不能成功？用到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>
[解决办法]
- 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>