我试图获取div的宽度,以便我可以在php中回显它。
任何人都可以给我一个如何实现这个目标的指针吗?
基本上,我想要开发一个“快速响应”的应用程序。 <div>
将在响应式模板中显示php中父<div>
的宽度。显然,在不同的窗口大小中,响应式模板会改变宽度大小,我只需要找到一种方法来输出这个宽度并在php中回显它。 JQuery已经在后台运行,所以我可以利用它......
只需要一点方向
答案 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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </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 ---> </a>
</th>
</tr>
</tbody>
</table>
</body>
</html>
尚不存在,更不用说{{1}值。
因此,使用PHP无法实现您想要实现的行为,因此您应该以不同的方式执行此操作。我可以用jquery推荐Javascript吗?例如,如果您的外部div
有width
而内部div
有id="a"
,那么您可以在Javascript中执行以下操作:
div
在这里,您有id="b"
将在加载事件中运行,然后将$(function() {
$("#a").resize(function() {
$("#b").text($(this).width());
});
});
事件注册到外部function
,这将更改内部resize
的内部文本1}}根据外div
的{{1}}。