读取元素javascript的宽度
[英]reading width of element javascript
问题描述
i'm trying to read the width of a element then set the width of another element equal to that. 
我正在尝试读取元素的宽度，然后将另一个元素的宽度设置为等于该宽度。 For some reason javascript is not reading the width properly though and i'm not sure why. 由于某种原因，javascript没有正确读取宽度，我不知道为什么。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="iflyreader.css" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript">
function setCommentWidth() {
var comment = document.getElementById("comments");
var pleft = document.getElementById("leftcontainer");
alert(pleft.style.width.toString());
comment.style.width = parseInt(pleft.style.width) * 2;
}
</script>
</head>
<body onclick="setCommentWidth()" >
<form id="form1" runat="server">
<div id = "container" >
<h2> Ifly Checkin Sheet</h2>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="row">
<div class="rowcontainer" id ="leftcontainer">
<p class="left">Last Name: <%# DataBinder.Eval(Container.DataItem, "lastname") %> </p>
<p class="left">First Name: <%# DataBinder.Eval(Container.DataItem, "firstname") %> </p>
<p class="left">Date: <%# DataBinder.Eval(Container.DataItem, "timestamp") %></p></div>
<div class="rowcontainer"> <p class="right">Member Number: <%# DataBinder.Eval(Container.DataItem, "memnum") %> </p>
<p class="right">Facility: <%# DataBinder.Eval(Container.DataItem, "facility") %> </p>
<p class="right">Reason: <%# DataBinder.Eval(Container.DataItem, "reason") %> </p></div>
<p id="comments" >Comments: <%# DataBinder.Eval(Container.DataItem, "comments") %></p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I think it might be something to do with my css declared values, but i'm not sure. 我认为这可能与我的css声明值有关，但我不确定。 Here's my stylesheet. 这是我的样式表。
body
{
background-color: #fff;
}
.cell {
display:inline-block;
margin-left:5px;
margin-right:5px;
padding:5px;
width: 100px;
}
.row
{
margin: 10px;
padding: 10px;
display: inline-block;
background-color: #888;
border-radius: 5px;
}
#container
{
margin-left: auto;
margin-right: auto;
width : 900px;
background-color: #fefefe;
padding: 50px;
}
p
{
font-weight: bold ;
color: #fff;
}
p.left
{
text-align: left;
width: auto;
}
p.right
{
text-align: right;
width: auto;
}
.rowcontainer
{
display: inline-block;
}
2 个解决方案
解决方案1
2 已采纳 2012-06-15 15:25:39
try offsetWidth. 尝试offsetWidth。
function setCommentWidth() {
var comment = document.getElementById("comments");
var pleft = document.getElementById("leftcontainer");
alert(pleft.offsetWidth);
comment.style.width = parseInt(pleft.offsetWidth) * 2;
}
解决方案2
0 2012-06-15 15:45:02
There are quite a lot of possible mistakes in the code above, so I'll try to guess a bit: 上面的代码中有很多可能的错误，所以我会尝试猜测一下：
First, if you want to change a width style via javascript, without using jquery, you should add the "px" to your value: 首先，如果你想通过javascript更改宽度样式，而不使用jquery，你应该在你的值中添加“px”：
comment.style.width = parseInt(pleft.style.width) + "px";
Then, as your code is asp, it seems to me that you are repeating the area behind: 然后，因为你的代码是asp，在我看来你正在重复背后的区域：
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
So if you try to use a repeated "id" value, it won't work, because "id" should be unique. 因此，如果您尝试使用重复的“id”值，它将无法工作，因为“id”应该是唯一的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.