2

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

例如，

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

但这些是我所追求的，

  1. 选择只有div类名的那个item。
  2. 仅获取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（高度）。

4

3 回答 3

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))) . '"';

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

演示

于 2011-11-13T16:03:18.523 回答
1 
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');

于 2017-12-07T18:00:27.407 回答
0

我记得，样式属性是“kebab-cases”的——IOW，它们应该都是小写的，所有的单词都用连字符分隔。这是一个资源。

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

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

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

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

代码：（演示）

$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
---
于 2020-02-05T23:18:16.000 回答