how to change an object style in a web page?

Gianni · August 24, 2013

Hello,

how can I change the "style" property of an <img> tag?
i tried with this short example, but without sucess.
what am I doing wrong?

#include <IE.au3>
$oIE = _IECreate()
; Here I create a web page with an image inside, with the style="border:5px solid green"
Local $sHTML = '<html><body><img src="http://aut1.autoit-cdn.com/site/wp-content/themes/TheCorporation/images/logo@2x.png" width="210"height="72" alt="AutoItScript" id="logo" style="border:5px solid green" /></body></html>'
_IEBodyWriteHTML($oIE, $sHTML)
Sleep(3000) ; a pause and then I remove the border
; here I change the body content like the above but without the border (without style="border:5px solid green")
Local $sHTML = '<html><body><img src="http://aut1.autoit-cdn.com/site/wp-content/themes/TheCorporation/images/logo@2x.png" width="210"height="72" alt="AutoItScript" id="logo" /></body></html>'
_IEBodyWriteHTML($oIE, $sHTML)

; now I would like to set the border again around the image
; but without success

Local $oImg = _IEImgGetCollection($oIE, 0)
Local $bodyImg = _IEDocGetObj($oImg)

; --- zone of mistakes ----

$bodyImg.style = "border:5px solid green" ; <-- this fails
; : ==> The requested action with this object has failed.:

_IEPropertySet($bodyImg, "style", "border:5px #FF0000") ; ; <-- this fails
;--> IE.au3 V2.4-0 Error from function _IEPropertySet, $_IEStatus_InvalidValue (Invalid Property)


$oImg.style = "border:5px solid green" ; <-- this fails
_IEPropertySet($oImg, "style", "border:5px #FF0000") ; ; <-- this fails

any help is welcome
thanks

Edited August 24, 2013 by Pincopanco

abberration · August 24, 2013

I think your problem lies in the fact that you are only viewing an image on a blank HTML page. Look at the source code of the page and it is:

<HTML></HTML>

Therefore, _IEImgGetCollection has no data to collect. I think you need to try your code with an actual HTML page.

dragan · August 24, 2013

You need to set the "style" attribute to your image object (answer lies here: http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx )

#include <IE.au3>
$oIE = _IECreate()



Local $sHTML = '<html><body><img src="http://aut1.autoit-cdn.com/site/wp-content/themes/TheCorporation/images/logo@2x.png" width="210"height="72" alt="AutoItScript" id="logo" /></body></html>'
_IEBodyWriteHTML($oIE, $sHTML)









Local $AllImages = _IETagNameGetCollection($oIE, 'img')
For $OneImage in $AllImages
    If $OneImage.id = 'logo' Then
        MsgBox(0, '', 'about to change')
        $OneImage.setAttribute("style", "border:5px solid green;")
        MsgBox(0, '', 'after changing')
    EndIf
Next

Edited August 24, 2013 by dragan

Gianni · August 24, 2013

Thanks for answers

@aberration
I also have seen the "short" html listing, but if you press F12 developer tools (I have IE8) you will see the whole html listing there. Strange behavior :think:

@dragan
well, I see that also running your script, no success is achieved, but, again, if you press F12 in the browser, is possible to note that before the setAttribute() statement, no style argument is present in the listing, but after the setAttribute(), this time is present the style attribute in the page source, but it is empty like this -> style="". Strange behavior again :huh2:
also, reading at the link you provided, it says: AttributeValue Type:Variant, how can it be passed as variant?

thanks to both for suggestions.

..... my doubts still remains :blink:

edit:

@aberration

I have also tried it on real html pages, but with the same result.

Edited August 24, 2013 by Pincopanco

dragan · August 24, 2013

It works for me, win 7, 64-bit, ie v10

Gianni · August 24, 2013

It works for me, win 7, 64-bit, ie v10

it doesn't for me win xp-sp3 32-bit ie v8

some workarounds ? :rolleyes:

edit:

autoit v3.3.8.1

IE.au3 V2.4-0

Edited August 24, 2013 by Pincopanco

dragan · August 25, 2013

There's always a workaround:

#include <IE.au3>
$oIE = _IECreate()
Local $sHTML = '<html><body><img src="http://aut1.autoit-cdn.com/site/wp-content/themes/TheCorporation/images/logo@2x.png" width="210"height="72" alt="AutoItScript" id="logo" /></body></html>'
_IEBodyWriteHTML($oIE, $sHTML)
Local $AllImages = _IETagNameGetCollection($oIE, 'img')
For $OneImage in $AllImages
    If $OneImage.id = 'logo' Then
        If $OneImage.getAttribute("style") = '' Then
            MsgBox(0, '', 'about to change')
            $OneImage.outerhtml = StringTrimRight($OneImage.outerhtml, 1) & ' style="border:5px solid green;">'
            MsgBox(0, '', 'after changing')
        Else
            MsgBox(0, '', 'about to change')
            $OneImage.setAttribute("style") = "border:5px solid green;"
            MsgBox(0, '', 'after changing')
        EndIf
        ExitLoop
    EndIf
Next

Edited August 25, 2013 by dragan

Gianni · August 25, 2013

Hello dragan
thanks for your interesting script.
from tests I have done with your scrip it is found that:

1) when I run the script on win7 - IE10, it works well and the instruction that is executed is the one with "outerHTML"

$OneImage.outerhtml = StringTrimRight($OneImage.outerhtml, 1) & ' style="border:5px solid green;">' ; OK on Win7/IE10

however, it also works if I force the execution of setAttribute

$OneImage.setAttribute("style") = "border:5px solid green;" ; also OK on Win7/IE10

------------------------

2) if I run the script on winXP - ie8 then the statement that is executed is the one with "setAttribute", but it fails and does not draw the border

$OneImage.setAttribute("style") = "border:5px solid green;" ; this Fails on WinXP/IE8

However, if I force the execution of "outerHTML" workaround on winXP then it works

$OneImage.outerhtml = StringTrimRight($OneImage.outerhtml, 1) & ' style="border:5px solid green;">' ; OK on WinXP/IE8

thanks again dragan for your tip, and the workaround.

well, now my best goal would be to be able to run the "$OneImage.setAttribute" statement on WinXP/IE8, because it should be the best way to turn on and turn off often and quickly that border.

I also hope to find the final solution because I would like to understand if it is possible or not in some way be able to use SetAttribute on IE8

any solution is always welcome

thanks

Edited August 25, 2013 by Pincopanco

dragan · August 25, 2013

Well, this is a WILD guess, I've no idea if this will work on IE8, but it seems that style is ALSO an object, so you use "SetAttribute" function to "style":

#include <IE.au3>
$oIE = _IECreate()
Local $sHTML = '<html><body><img src="http://aut1.autoit-cdn.com/site/wp-content/themes/TheCorporation/images/logo@2x.png" width="210"height="72" alt="AutoItScript" id="logo" /></body></html>'
_IEBodyWriteHTML($oIE, $sHTML)
Local $AllImages = _IETagNameGetCollection($oIE, 'img')
For $OneImage in $AllImages
    If $OneImage.id = 'logo' Then
        MsgBox(0, '', 'about to change')
        $OneImage.style.setAttribute('border', '5px solid green')
        MsgBox(0, '', 'after changing')
        ExitLoop
    EndIf
Next

Edited August 25, 2013 by dragan

Gianni · August 25, 2013

well, your wild guess was right!
now it work fine also on WinXP/IE8.

Nice job dragan! :thumbsup:
Thanks again
bye

how to change an object style in a web page?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content