通过 DOM 或 XPATH 获取每个元素属性的宽度和高度答案

【问题标题】：Get the width and height of each element's attribute via DOM or XPATH通过 DOM 或 XPATH 获取每个元素属性的宽度和高度
【发布时间】：2011-12-28 02:21:07
【问题描述】：

如何获取每个元素属性的宽度和高度？

例如，

$dom = new DOMDocument;
$dom->loadHTML('<div class="item" style="width:295px; height:210px; border:1px solid #000;"></div><div></div>');

foreach( $dom->getElementsByTagName('div') as $node ) 
{
    $style = $node->getAttribute( 'style' );

    var_dump($style);
}

结果，

string 'width:295px; height:210px; border:1px solid #000;' (length=49)
string '' (length=0)

但这些是我所追求的，

只选择类名为item的div。
仅获取295（宽度）和210（高度）。

DOM 可以吗？还是 XPATH？

编辑：

我现在似乎设法选择了带有类名的 div，

$dom = new DOMDocument;
$dom->loadHTML('<div class="item" style="width:295px; height:210px; border:1px solid #000;"></div><div></div>');

$xpath = new DOMXpath($dom); 

foreach ($xpath->query('//*[@class="item"]') as $node) {

    $style = $node->getAttribute( 'style' );

    var_dump($style);
}

现在这就是我所追求的，

得到295（宽度）和210（高度）。

【问题讨论】：

stackoverflow.com/questions/3448005/… 将回答有关 XPath 抓取具有特定类属性的 div 的部分。您需要常规的字符串函数或 CSS 解析器来分解内联样式。这不是 DOM 的域。
stackoverflow.com/questions/4432334/… 回答如何使用正则表达式解析内联样式
在旁注中获取带有项目类属性的div的样式属性，您也可以使用//div[@class="item"]/@style。这将返回一个 DOMAttr。

标签： php php-5.3 domdocument domxpath getattribute

【解决方案1】：

如果您不想使用正则表达式，您可以使用简单的字符串函数来提取您需要的内容。这是一个例子，它很可能可以改进。

$width = 'width:'; $height = 'height:';
// Adding whitespace will not affect the result
$str = '    width:   295 px; height:   210 px; border:1px solid #000;';

$width_str = strstr( $str, $width);
echo 'Width: "' . trim( substr( $width_str, strlen( $width), stripos( $width_str, 'px;') - strlen( $width))) . '"';

echo "\n";

$height_str = strstr( $str, $height);
echo 'Height: "' . trim( substr( $height_str, strlen( $height), stripos( $height_str, 'px;') - strlen( $height))) . '"';

当然，您可以将$width 和$height 变量替换为其字符串文字，并删除对strlen() 的调用，因为它们将是常量整数。

Demo

【讨论】：

【解决方案2】：

function GetStyleValue($style, $type){
$value = false;
$all = explode(';',$style);
foreach($all as $part){
    $temp = explode(':', $part);
    if(trim($temp[0]) == $type){
        $value = (int)trim($temp[1]);
    }       
}
return $value;}

你可以使用这个函数来获取width，height或者其他样式值，只要调用：

$width = GetStyleValue($img->getAttribute("style"), 'width');

【讨论】：

【解决方案3】：

我记得，样式属性是“kebab-cased”——IOW，它们应该都是小写的，所有单词都用连字符分隔。这里是one resource。

您已经证明了一个不错的选择，即使用 DOM 解析器将 div 元素与 item 类作为目标。

解析样式声明的下一步将再次使用CSS Parser 最可靠，但如果您对这项工作不感兴趣，那么几个具有识别模式的preg_match() 调用应该会让您保持很好。

对于那些不知道可能会影响此任务结果的边缘案例的人，我将在其中一个 div 中添加一个 title 属性，以欺骗不充分的模式或 DOM 不感知技术，并添加一个line-height 出于同样的原因声明。这些示例将捕获许多无法解析 DOM 的可能“捷径”解决方案。

正则表达式模式必须匹配整个单词height 和width。我的模式将检查这些单词是否位于字符串的开头或前面有分号，然后是零个或多个空格字符。一旦找到其中一个单词，下一个非 whitesoace 字符必须是冒号。然后在再次允许零个或多个空白字符后，我使用\K“忘记”所有以前匹配的字符，然后只返回所需的数字字符作为“完整字符串匹配”（元素[0]）。

代码：(Demo)

$html = <<<HTML
<div class="items">
    <div class="item" title="Checking for bad parsing. height:666px; width:666px;" style="width:295px; height:210px; border:1px solid #000;"></div>
    <div></div>
    <div class="item" style="line-height:14pt; border:1px solid #000; height :420px; width: 590px;"></div>
</div>
HTML;
$dom = new DOMDocument;
$dom->loadHTML($html);
$xpath = new DOMXpath($dom); 
foreach ($xpath->query('//div[@class="item"]/@style') as $node) {
    $style = $node->nodeValue;
    echo "The height integer: " , preg_match('~(?:^|;)\s*height\s*:\s*\K\d+~', $style, $h) ? $h[0] : '';
    echo "\n";
    echo "The width integer: " , preg_match('~(?:^|;)\s*width\s*:\s*\K\d+~', $style, $w) ? $w[0] : '';
    echo "\n---\n";
}

输出：

The height integer: 210
The width integer: 295
---
The height integer: 420
The width integer: 590
---

【讨论】：

我的意思是，这个答案当然应该是 DV'ed！毕竟，它展示了最佳/直接实践，识别麻烦的边缘案例，包括教育解释，并通过在线演示证明其成功处理。 Stackoverflow 为什么要让这类内容冒泡到页面顶部？