0

要素の幅を読み取ってから、別の要素の幅をそれに等しく設定しようとしています。なんらかの理由で 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;
}
4

2 に答える 2

2

offsetWidthを試してください。

function setCommentWidth() {

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

    }
于 2012-06-15T15:25:39.407 に答える
0

上記のコードにはかなり多くの間違いがある可能性があるので、少し推測してみます。

まず、jqueryを使用せずにjavascriptを介して幅のスタイルを変更する場合は、値に「px」を追加する必要があります。

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

次に、コードがaspであるため、背後の領域を繰り返しているように見えます。

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

したがって、「id」の値を繰り返し使用しようとしても、「id」は一意である必要があるため、機能しません。

于 2012-06-15T15:45:02.353 に答える