Apply CSS using Javascript

Question

How can I apply elements like the following CSS in JavaScript:

.watch-non-stage-mode .player-width {
    width : 640px !important;
}

I tried doing this but it's not working:

document.getElementByClassName('.watch-non-stage-mode .player-width').style.width = '640px !important';

What are you trying to accomplish? Your pseudo code looks like it's attempting to just set an object to the same value as the CSS already specifies. So, what problem are you actually trying to solve? — jfriend00
– jfriend00, Commented May 10, 2015 at 17:55
I'm trying to use javascript by using the plugin grease monkey and change the size of YouTube videos to 640 x 360 i have already done this with css but i need JavaScript because YouTube forces it to stretch to window size and it effects the video time. here is my full css userstyles.org/styles/103737/youtube-old-default — user1719826
– user1719826, Commented May 10, 2015 at 20:02

marsh · Accepted Answer · 2015-05-10 18:09:15Z

4

Try to use querySelector:

document.querySelector('.watch-non-stage-mode .player-width').style.width = '640px'

or if !important is necessarily:

document.querySelector('.watch-non-stage-mode .player-width').style.cssText = 'width: 640px !important;'

In your case you also may use getElementsByClassName, but you incorrectly got a node, must be:

document.getElementsByClassName('watch-non-stage-mode player-width')[0]

edited May 10, 2015 at 18:09

answered May 10, 2015 at 17:57

marsh

1,4411 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rob · Accepted Answer · 2015-05-10 19:15:17Z

0

The unit, 'px', and '!important' must be added to the property separately. Do:

document.querySelector('.watch-non-stage-mode .player-width').style.width = 640 + 'px' + '!important';

Also, use querySelector as noted to select the elements by the actual dot classname. You cannot use '.classname' in the manner you show (which is incorrect anyway). Elements is plural. getElementsByClassName

edited May 10, 2015 at 19:15

answered May 10, 2015 at 19:09

Rob

15.2k30 gold badges49 silver badges73 bronze badges

Collectives™ on Stack Overflow

Apply CSS using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related