Question

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

例如，

$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)

但这些就是我所追求的，

选择只有div类名称的item。
仅限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（高度）。

Answer 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

Answer 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');

Answer 3

我记得，

样式属性是“ kebab大小写的”-IOW，它们应该全部为小写，并且所有单词都用连字符分隔。这是one resource。

通过使用DOM解析器将div类定位到item元素，您已经证明了一个不错的选择。

再次使用CSS Parser来解析样式声明是最可靠的，但是如果您不愿意这样做，那么可以进行一些preg_match()的识别模式应该可以使您保持稳定。

对于那些不了解可能会混淆该任务结果的情况的人，我向一个div中添加了一个title属性，该属性将愚弄不充分的模式或DOM-wareware技术，并且出于同样的原因添加一个line-height声明。这些样本将捕获许多可能无法解析DOM的“捷径”解决方案。

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

代码：（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
---

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

3 个答案: