元素javascript的读取宽度答案

【问题标题】：reading width of element javascript元素javascript的读取宽度
【发布时间】：2012-06-15 23:45:02
【问题描述】：

我正在尝试读取一个元素的宽度，然后将另一个元素的宽度设置为等于该宽度。出于某种原因，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>

我认为这可能与我的 css 声明值有关，但我不确定。这是我的样式表。

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;
}

【问题讨论】：

它提醒什么值？无论如何..尝试给#cmets与rowcontainer相同的填充，或者将.rowcontainer的填充*2添加到#cmets的宽度

标签： javascript asp.net css

【解决方案1】：

试试 offsetWidth。

function setCommentWidth() {

        var comment = document.getElementById("comments");
        var pleft = document.getElementById("leftcontainer");
        alert(pleft.offsetWidth);
        comment.style.width = parseInt(pleft.offsetWidth) * 2; 

    }

【讨论】：

【解决方案2】：

上面的代码有很多可能的错误，所以我试着猜测一下：

首先，如果您想通过 javascript 更改宽度样式，而不使用 jquery，则应将“px”添加到您的值中：

comment.style.width = parseInt(pleft.style.width) + "px";

然后，由于您的代码是 asp，在我看来，您正在重复后面的区域：

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>

因此，如果您尝试使用重复的“id”值，它将不起作用，因为“id”应该是唯一的。

【讨论】：