чтение ширины элемента javascript

Я пытаюсь прочитать ширину элемента, а затем установить ширину другого элемента, равную этому. По какой-то причине javascript неправильно читает ширину, и я не уверен, почему.чтение ширины элемента 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; 
}

источник

2012-06-15 Chris Stewart

Какое значение он предупреждает? В любом случае .. Попробуйте дать #comments ту же обивку, что и rowcontainer, или добавьте дополнение * 2 of.rowcontainer к ширине #comments – BjarkeCK

попытка 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-15 15:25:39 Jia

Есть довольно много возможных ошибок в коде выше, так что я буду пытаться угадать, немного:

Во-первых, если вы хотите изменить стиль ширины с помощью JavaScript, без использования JQuery , вы должны добавить «точек» в вашей ценности:

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

Тогда, как ваш код осина, мне кажется, что вы повторяете область позади:

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

Так что если вы попытаетесь использовать повторяющееся значение «id», это не сработает, потому что «id» должен быть уникальным.

источник

2012-06-15 15:45:02 Jorge

чтение ширины элемента javascript

ответ

Смежные вопросы