2

How can I get the width and height of each element's attribute?

For instance,

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

result,

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

but these are what I am after,

  1. select the div that has the classname of item only.
  2. get 295 (width) and 210 (height) only.

Is it possible with DOM? Or XPATH?

EDIT:

I seem to manage to select the div with the classname now,

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

Now this is what I am after only,

get 295 (width) and 210 (height).

Run
  • 54,938
  • 169
  • 450
  • 748
  • http://stackoverflow.com/questions/3448005/implementing-condition-in-xpath-and-xquery/3448050#3448050 will answer the part about the XPath grabbing the div with a certain class attribute. You need regular string functions or a CSS parsers to break apart the inline style. This is not DOM's domain. – Gordon Nov 13 '11 at 15:52
  • 2
    http://stackoverflow.com/questions/4432334/parse-inline-css-values-with-regex answers how to parse inline styles with regex – Gordon Nov 13 '11 at 15:58
  • 1
    on a sidenote to get the style attribute of the div with the class attribute of item you can also do `//div[@class="item"]/@style`. This would return a DOMAttr then. – Gordon Nov 13 '11 at 16:00

3 Answers3

2

Style properties, as I recall, are "kebab-cased" -- IOW, they are expected to be all lowercase and all words are separated by hyphens. Here's one resource.

You have demonstrated a good choice by using a DOM parser to target your div elements with the item class.

The next step of parsing the style declarations would, again, be most reliable with a CSS Parser, but if you are not interested in going to that effort, then a couple of preg_match() calls with discerning patterns should keep you in good stead.

For those who are not aware of fringe cases that may monkeywrench the outcomes for this task, I am adding a title attribute to one of the divs that will fool an inadequate pattern or DOM-unaware technique, and also adding a line-height declaration for the same reason. These samples will catch many of the possible "shortcut" solutions that fail to parse the DOM.

The regex pattern must match the whole words height and width. My pattern will check that these words are at the start of the string or are preceded by a semicolon then zero or more whitespace characters. Once one of the words is found, the next non-whitesoace character must be a colon. Then after allowing zero or more whitespace characters again, I use \K to "forget" all previously matched characters, then ONLY return the desired digital characters as the "full string match" (element [0]).

Code: (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";
}

Output:

The height integer: 210
The width integer: 295
---
The height integer: 420
The width integer: 590
---
mickmackusa
  • 43,625
  • 12
  • 83
  • 136
  • Related content: [Extract value from background-image style attribute with xpath](https://stackoverflow.com/a/47056267/2943403) – mickmackusa Oct 10 '22 at 21:08
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;}

You can use this function to get width, height or other style value, just call:

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

Milo
  • 3,365
  • 9
  • 30
  • 44
Viktor Peshevski
  • 13
  • 7
1

If you don't want to use a regex, you can use simple string functions to extract what you need. Here is an example, it most likely can be improved upon.

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

Of course, you can replace the $width and $height variables with their string literals, and remove the calls to strlen() as they would be constant integers.

Demo

nickb
  • 59,313
  • 13
  • 108
  • 143