计算元素的宽度?

时间:2016-04-22 12:53:29

标签: php html width

我试图获取div的宽度,以便我可以在php中回显它。

任何人都可以给我一个如何实现这个目标的指针吗?

基本上,我想要开发一个“快速响应”的应用程序。 <div>将在响应式模板中显示php中父<div>的宽度。显然,在不同的窗口大小中,响应式模板会改变宽度大小,我只需要找到一种方法来输出这个宽度并在php中回显它。 JQuery已经在后台运行,所以我可以利用它......

只需要一点方向

2 个答案:

答案 0 :(得分:1)

您的PHP代码将运行服务器端。在生成DOM之后,您将只能确定宽度客户端(例如,使用javascript)。你可以通过简单的javascript来做到这一点

document.getElementById("yourDivId").offsetWidth

或使用jQuery

$("#yourDivId").width()

如果你真的需要在PHP代码中访问宽度,那么你需要发送一个post请求(ajax或full),以便PHP可以获得值。

答案 1 :(得分:1)

你不能这样做,因为PHP在服务器上运行,用户将从他们的浏览器访问该页面,这通常是一台不同的计算机。用户在地址栏中输入网址并点击输入后,GET请求将被发送到所请求页面的服务器。服务器将运行服务器端脚本(例如,在PHP中),生成页面结构并将该结构发送到客户端,即浏览器。当服务器将结构发送到浏览器时,PHP代码已经成功完成,但结构尚未显示,因此此时<!DOCTYPE html> <html> <head> <style> .important { background-color: red } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { var t = $(".field-__str__"); for (var i = 0; i < t.length; i++) { var text = t.eq(i).text().trim().charAt(0); if (text === text.toUpperCase()) { t.eq(i).find("a").addClass("important"); } } }) </script> </head> <body> <table id="result_list"> <thead> <tr> <th scope="col" class="action-checkbox-column"> <div class="text"><span><input type="checkbox" id="action-toggle" /></span> </div> <div class="clear"></div> </th> <th scope="col" class="column-__str__"> <div class="text"><span>Bigram</span> </div> <div class="clear"></div> </th> </tr> </thead> <tbody> <tr class="row1"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3641" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3640" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3640/">Edi Ramës ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3554" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3554/">përmbysi lulishten ---&gt; </a> </th> </tr> <tr class="row1"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3553" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3553/">bredhat përmbysi ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3552" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3552/">preu bredhat ---&gt; </a> </th> </tr> <tr class="row1"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3551" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3551/">tregon preu ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3550" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3550/">sheshit tregon ---&gt; </a> </th> </tr> <tr class="row1"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3549" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3549/">gjelbërim sheshit ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3548" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3548/">Flet gjelbërim ---&gt; </a> </th> </tr> <tr class="row1"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3547" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3547/">bashkie Flet ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3546" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3546/">kryetar bashkie ---&gt; </a> </th> </tr> <tr class="row1"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3545" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3545/">Rama kryetar ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3544" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3544/">Edi Rama ---&gt; </a> </th> </tr> <tr class="row1"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3543" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3543/">miratoi Edi ---&gt; </a> </th> </tr> <tr class="row2"> <td class="action-checkbox"> <input class="action-select" name="_selected_action" type="checkbox" value="3542" /> </td> <th class="field-__str__"><a href="/admin/app/bigram/3542/">projektin miratoi ---&gt; </a> </th> </tr> </tbody> </table> </body> </html>尚不存在,更不用说{{1}值。

因此,使用PHP无法实现您想要实现的行为,因此您应该以不同的方式执行此操作。我可以用jquery推荐Javascript吗?例如,如果您的外部divwidth而内部divid="a",那么您可以在Javascript中执行以下操作:

div

在这里,您有id="b"将在加载事件中运行,然后将$(function() { $("#a").resize(function() { $("#b").text($(this).width()); }); }); 事件注册到外部function,这将更改内部resize的内部文本1}}根据外div的{​​{1}}。