How to shrink this picture by 50% or to a dimension of 100 x 30pixel?

[Ben]

Lets start with a sample web page:

 

http://www.welt.de/politik/ausland/article115264737/Was-wirklich-hinter-Nordkoreas-Atomdrohung-steckt.html?config=print

 

As you can see in the upper left corner there is a picture with the logo "Die Welt" of the newspaper.

 

How can I shrink this picture logo from greasemonkey script

 

a) by 50%

b) to a dimension of 100x30 pixel

 

?

 

Thank you

Ben

 

[ArmEagle]

document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'width: 50%;')
document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'max-width: 130px; max-height: 30px;')

There are many options to do so, but the lines below work

a) document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'width: 50%;')

b) document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'max-width: 130px; max-height: 30px;')

The 'header' doesn't reduce in height with that though (the line below the image and text on the right). If you want that too, then you can add this:

document.querySelector('#header').setAttribute('style', 'height: 60px;')

document.querySelector('#header').setAttribute('style', 'height: 60px;')

document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'width: 50%;')

document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'max-width: 130px; max-height: 30px;')

document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'width: 50%;')

document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'max-width: 130px; max-height: 30px;')

document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'width: 50%;')

document.querySelector('img[title="DIE WELT"]').setAttribute('style', 'max-width: 130px; max-height: 30px;')

Ben

 

--
You received this message because you are subscribed to the Google Groups "greasemonkey-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to greasemonkey-us...@googlegroups.com.
To post to this group, send email to greasemon...@googlegroups.com.
Visit this group at http://groups.google.com/group/greasemonkey-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[ArmEagle]

I'm sorry for the many codelines in there. I was pasting text but gmail didn't show any result to me, except when I ran it through notepad(++).

[Ben]

Thank you.

 

Two more questions:

 

Do I have to append a ";" at the end of a document.querySeleector() statement?

 

Assume I put the document.querySeleector()  statement at the end of a GM script (e.g. after other GM_addStyle() statements):

Do I have to add an "!important;" postfix to this statement?

[Alex Haan]

A trailing ; would be the right way to do it.

!important is not needed, inline CSS goes before linked stylesheets. I guess !important is needed when the linked stylesheet also has !important for a rule. But I never tried that out.

ArmEagle

[LWChris@LyricWiki]

Am 15.04.2013 07:54, schrieb Ben:
> Thank you.
>
> Two more questions:
>
> Do I have to append a ";" at the end of a document.querySeleector()
> statement?

For the last statement of a block (i. e. the whole script or within "{
}"), you needn't use the ;
However it is always highly recommended to getting used to end all
commands with ;
Just because you might want to extend the script and it's easy to forget
it then.

The same is for CSS rules.

You should also try to get used to brackets in JS. Although "if (test)
doSomething else doSomethingElse" works fine,
using "if (test) { doSomething; } else { doSomethingElse; } is a much
better style.

"!important" makes a rule override some otherwise higher statement. It
is for example useful if you write something like:

a:link { color: red; }
a:focus { color: blue; }
a:hover { color: green; }
a:active { color: orange; }

that would put your "a" elements in various colours depending on their
states.

div#navigation { color: white !important; }

would ensure that the div element with id "navigation" (and due to
inheritance of styles all its child elements) have a white font colour.

div#navigation a.currentPage { color: black !important; }

could the re-override the rule to make the link with the class
"currentPage" black again or something.
Which rule overrides which other rules is decided by 1) important-flag,
2) selector, and 3) position in CSS file.

The hierarchy/precedence is described here:
http://www.w3.org/TR/CSS2/cascade.html

Chris